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

Question

我已经调整了这个 ExtJS Grid with detailed panel example满足我的需求。

它工作得很好，但现在我想添加这个功能:

在我的网格中，其中一个字段可能包含很长的文本(这是从我的商店中检索它的方式)。我只想显示该字段的前 N ​​个字符，并且仅当用户执行某些操作时(将鼠标悬停在该字段上/单击它/双击它/...)向他/她展示完整的值(也许在 window 或更整洁的地方)。

我已经设法定义了一个只显示前 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;
}