如何在ExtJS GridPanel中显示超长字段

Question

我已经根据自己的需要调整了这个ExtJS网格和详细的面板示例。

它工作得相当好，但现在我想添加这个功能：

在我的网格中，其中一个字段可能包含很长的文本（这就是从我的存储中检索文本的方式）。我只想显示该字段的前N个字符，并且只有当用户做了一些事情（悬停在字段上/点击它/双击它/…）时才向他/她显示完整的值（可能在窗口或更整洁的地方）。

我已经设法定义了一个只显示前N个字符的渲染器，比如：

var my_grid = new Ext.grid.GridPanel({
    store: my_store,
    columns: [
        {header: "description", width: 400, dataIndex: 'description', sortable: true, 
            renderer: function(val, meta, record) {
            var tpl;
            if (val.length > 400) 
            {
                val = val.substr(0, 400) + '...';
            }
            tpl = new Ext.Template('<div style="white-space:normal; word-wrap: break-word;">{val}</div>');
            return tpl.apply(
            {
                val: val
            });
        }},
        {header: "some_other_column_header", width: 100, dataIndex: 'blah-blah',     sortable: true}
        ],
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    height:200,
    split: true,
    region: 'north'
});

我的问题是，当用户做某事时，如何添加一个包含全文的窗口/其他选项。我想我应该在网格中添加一个监听器，但我不知道如何编写这个监听器。。。

谢谢！！！

Answer 1

要在单元格中完全显示文本：

.x-grid-cell-inner{
    white-space: normal!important;
}

Answer 2

尝试添加"cellclick"侦听器

listeners : {   
    'cellclick' : function(grid, rowIndex, columnIndex, e) {
        var record = grid.getStore().getAt(rowIndex);  // Get the Record
        var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
        var data = record.get(fieldName);
        newWin(data);
    }
}

或者也可以从渲染器中完成

在渲染器中使用ext的省略号功能参考省略号

var rendererData = function(val,p,rec){
    return '<div onClick=javascript:newWin("'+escape(val)+'");>'+Ext.util.Format.ellipsis(val,50)+'</div>';
}
function newWin(val){
        new Ext.Window({
            height : 100,
            widht  : 100,
            title  : 'title',
            items  : [{xtye:'displayfield',html:val}]
        }).show();
    }