Ext JS EditorGridPanel - 如何拆分单元格以显示多行

Posted 2023-02-26

【中文标题】Ext JS EditorGridPanel - 如何拆分单元格以显示多行

【英文标题】：Ext JS EditorGridPanel - How to split cell to show multiple rows

【发布时间】：2013-10-17 07:25:35

【问题描述】：

在 Ext.grid.EditorGridPanel 表格中，如何将单元格拆分为两行或三行？

如下图所示

【问题讨论】：

哪个 Ext JS 版本？

在 Ext 4+ 中这很容易 - 你可以，而不是拆分，只设置 rowspan 第一列单元格。另一方面，在 Ext 3.4 中，这并不容易。每行都呈现为用 div 包裹的单独表格，因此 rowspan 将不起作用。可能最简单的方法是更改​​第一列中单元格的样式并将它们呈现在下面的那些上。稍后我会想出一些东西。

【参考方案1】：

我设法做了一种行跨度而不是行拆分。 IMO 它更容易，并且看起来与附加图像上的网格相同。示例代码：

var grid = new Ext.grid.EditorGridPanel(
    [...],

    // hook up events
    initComponent: function () 
        Ext.grid.GridPanel.prototype.initComponent.call(this);

        this.getView().on('refresh', this.updateRowSpan, this);
        this.getView().on('rowupdated', this.updateRowSpan, this);
    ,

    onLayout : function(vw, vh) 
        this.updateRowSpan();
    ,

    // set span on rows
    updateRowSpan: function() 
        var columns = this.getColumnModel().config,
            view = this.getView(),
            store = this.getStore(),
            rowCount = store.getCount(),

            column = columns[0], // put propert column index here
            dataIndex = column.dataIndex,

            spanCell = null,
            spanCount = null;
            spanValue = null;

        for (var row = 0; row < rowCount; ++row) 
            var cell = view.getCell(row, 0),
                record = store.getAt(row),
                value = record.get(dataIndex);

            if (spanValue != value) 
                if (spanCell !== null) 
                    this.setSpan(Ext.get(spanCell), spanCount);
                

                spanCell = cell;
                spanCount = 1;
                spanValue = value;
             else 
                spanCount++;
            
        

        if (spanCell !== null) 
            this.setSpan(Ext.get(spanCell), spanCount);
        
    ,

    // set actual span on row
    setSpan: function(cell, count) 
        var view = this.getView(),
            innerCell = Ext.get(cell.down('*')),
            height = cell.getHeight(),
            width = cell.getWidth();

        cell.setStyle('position', 'relative');
        if (count == 1) 
            innerCell.setStyle('position', '');
            innerCell.setStyle('height', '');
            innerCell.setStyle('height', '');
         else 
            innerCell.setStyle('position', 'absolute');
            innerCell.setStyle('height', (height * count - cell.getPadding('tb') - innerCell.getPadding('tb')) + 'px');
            innerCell.setStyle('width', (width - cell.getPadding('lr') - innerCell.getPadding('lr')) + 'px');
        
    
);

此代码通过应用position: absolute 和足够大的大小来覆盖下面的行来更改.x-grid3-cell-inner 的样式。请注意，您还必须应用一些不透明的背景才能使其工作。工作样本：http://jsfiddle.net/RpxZ5/8/

我首先为 Ext JS 4 编写代码，如果您有兴趣，这里是工作示例：http://jsfiddle.net/wQSQM/3/

【讨论】：

它确实有效，但有一个问题。由于应用了.x-grid3-cell-inner position:absolute，forcefit 功能停止对该行工作。您可以签入您提供的 jsfiddle。知道如何解决吗？此问题仅在版本 3.4 中发现。它适用于 4.x