Question

我需要使用ExtJS 4.1网格实现逻辑，该网格具有colspan和rowspan的特性。

Answer 1

解决方案一：使用rowSpan / colSpan的ExtJS Grid

如果你使用普通的ExtJS网格，每个参数值有一行，你可以（ab）以某种方式使用渲染器：

renderer:function(value, meta, record, rowIndex, colIndex, store, view) {
    var columnManager = view.ownerCt.getColumnManager(),
        previousRecord = store.getAt(rowIndex-1),
        nextRecord = store.getAt(rowIndex+1),
        column = columnManager.getHeaderAtIndex(colIndex),
        previousColumn = columnManager.getHeaderAtIndex(colIndex-1),
        nextColumn = columnManager.getHeaderAtIndex(colIndex+1),
        cellAbove = view.getCell(previousRecord,column),
        cellBelow = view.getCell(nextRecord,column),
        cellLeft = view.getCell(record, previousColumn),
        cellRight = view.getCell(record, nextColumn);
    ...
    if(someCondition) {
        meta.tdAttr='rowSpan=4';
    } else if (someOtherCondition /* any of the previous three records has someCondition */) {
        meta.tdStyle='display:none';
    }
    return value; // Don't forget this, or else your cell is empty!
}`

以类似的方式，我曾经实现了一个渲染器，它合并了相同内容的相邻单元格，因为我必须替换MSFlexGrid with MergeCells=flexMergeFree。

我知道四个缺点：

您必须始终获得正确的显示量：colSpan和rowSpan都没有。
您无法使用特殊列（numbercolumns，datecolumns，checkcolumns）轻松使用它，因为您覆盖了它们的正常渲染器。
您的数据必须位于具有原始值的＆＃34;记录中。表单，因此当您加载商店时，您必须遍历树并生成记录。
将不再适用于ExtJS6;不确定ExtJS 5。

解决方案二：嵌套网格

您可以轻松render a grid into a grid's RowExpander plugin。

plugins: [{
    ptype: "rowexpander",
    rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']
    listeners:{
        expandbody:function() {
            var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
            if (Ext.getCmp(targetId + "_grid") == null) {
                var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
                    renderTo: targetId,
                    id: targetId + "_grid"
                });
                rowNode.grid = sessionInstructionGrid;
                sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
            }
        }
    }
}],

主要缺点是它看起来像网格内的网格，而不是像rowSpan和colSpan的单个网格;所以它远不及你的截图。但这就是我今天实现包含数组的字段内容的显示方式。如果要显示结构化数据（对象），也可以将propertygrid渲染到rowExpander中。

如何使用ExtJS Grid 4.1创建具有行/ colspans的表格式结构

1 个答案: