2

我已经根据我的需要调整了这个带有详细面板示例的 ExtJS Grid。

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

在我的网格中，其中一个字段可能包含很长的文本（这是从我的商店中检索它的方式）。我只想显示该字段的前 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'
});

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

谢谢！！！

4

2 回答 2

4

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

.x-grid-cell-inner{
    white-space: normal!important;
}
于 2013-04-01T08:27:01.320 回答
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();
    }
于 2012-04-05T11:58:08.770 回答