ExtJS 网格面板 - 每行多个“行”？

Posted 2023-02-26

【中文标题】ExtJS 网格面板 - 每行多个“行”？

【英文标题】：ExtJS Grid Panel - Multiple "rows" per row?

【发布时间】：2011-05-23 19:44:50

【问题描述】：

我们有一个 ExtJS 网格面板，它已经包含了太多的列 (imo)，所以我正在考虑将一些数据包含到主行的“子行”中。喜欢：

数据1 |数据2 |数据3 |数据4 |数据5 跨越的一些附加数据 数据1 |数据2 |数据3 |数据4 |数据5 跨越的一些额外数据

我知道expander 插件，但我们不需要展开/折叠功能，并且总是需要打开子行。

有什么想法或想法吗？

提前致谢。

【参考方案1】：

如果你使用 ExtJS-4，

// ...
var rowBodyFeature = Ext.create('Ext.grid.feature.RowBody', 
    getAdditionalData: function(data, rowIndex, record, orig) 
        var headerCt = this.view.headerCt,
        colspan  = headerCt.getColumnCount();
        return 
            rowBody: "HELLO WORLD!", // do something with record
            rowBodyCls: this.rowBodyCls,
            rowBodyColspan: colspan
        ;
    
);

Ext.create('Ext.grid.Panel', 
    // ...
    features: [rowBodyFeature]
    // ...
);

如果使用 ExtJS-3，请尝试：

new Ext.grid.GridPanel(
    //...
    viewConfig: 
        enableRowBody: true,
        getRowClass: function(record, rowIndex, p, store) 
            p.body = 'HELLOW WORLD: ' + record.get('attribute');
            return 'x-grid3-row-expanded';
        
    

【讨论】：

您可以找到更多文档，包括示例，here (ExtJS 4.2.1)

【参考方案2】：

您需要做的是使用扩展插件实现嵌套网格。在单击或展开事件中，您可以使用行 ID 作为键来加载子行。