Question

我已根据我的需要调整了此ExtJS Grid with detailed panel example。

效果相当不错但现在我想添加此功能：

在我的网格中，其中一个字段可能包含很长的文本（这是从我的商店中检索它的方式）。我想只显示此字段的前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的省略号函数参考ellipsis

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();
    }

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

2 个答案: