如何使用ExtJS Grid 4.1使用行/列跨度制作类似表的结构

Question

我需要使用具有colspan和rowspan功能的ExtJS 4.1网格实现逻辑。

Answer 1

Solution One: ExtJS Grid with rowSpan/colSpan

If you use a normal ExtJS grid, with one row per parameter value, you can (ab)use the renderer somehow:

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!
}`

In a similar fashion, I have once implemented a renderer that merged adjacent cells with same content, because I had to replace an MSFlexGrid with MergeCells=flexMergeFree .

Four drawbacks I know:

• you have to always get the correct amount of display:none for your colSpan and rowSpan.
• you can't use it easily with special columns (numbercolumns, datecolumns, checkcolumns), because you override their normal renderer.
• your data has to be in a "record with primitive values" form, so when you load the store you would have to walk through the tree and generate the records.
• will no longer work in ExtJS6; not sure about ExtJS 5.

Solution two: Nested grids

You can easily 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') });
            }
        }
    }
}],

The main drawback being that it does look like a grid inside a grid, not like a single grid with rowSpan and colSpan; so it is nowhere near your screenshot. But this is how I implemented display of content of fields containing arrays just today. You could as well render a propertygrid into the rowExpander, if you want to show structured data (objects).