ExtJS 网格中的多个行主体

Question

有没有办法在 ExtJS 网格中为每一行显示多个行主体？

问题是我需要在每一行之前和之后显示一个。我可以有两个行主体（一个带有属性 showBefore: true），但据我所知你只能添加一个行主体。

有没有简单的方法来做到这一点？在我看来，除了编写覆盖之外别无他法。

Answer 1

Ext.define("App.override.grid.feature.RowBody", {
    override: "Ext.grid.feature.RowBody",

    extraRowTpl: [
        '{%',
        'if(this.rowBody.bodyBefore) {',
        'values.view.renderColumnSizer(values, out);',
        '} else {',
        'this.nextTpl.applyOut(values, out, parent);',
        '}',
        'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values);',
        '%}',
        '<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}" {ariaRowAttr}>',
        '<td class="' + Ext.baseCSSPrefix + 'grid-td ' + Ext.baseCSSPrefix + 'grid-cell-rowbody" colspan="{rowBodyColspan}" {ariaCellAttr}>',
        '<div class="' + Ext.baseCSSPrefix + 'grid-rowbody {rowBodyDivCls}" {ariaCellInnerAttr}>{rowBody}</div>',
        '</td>',
        '</tr>',

        '{%',
        'if(this.rowBody.bodyBefore) {',
        'this.nextTpl.applyOut(values, out, parent);',
        '}',
        '%}',

        // RD ->        
        '{%',
        'if(this.rowBody.secondRowBody) {',
        'values.view.rowBodyFeature.setupRowData(values.record, values.recordIndex, values, true);',
        '}',
        '%}',
        '<tpl if="this.rowBody.secondRowBody">',
        '<tr class="' + Ext.baseCSSPrefix + 'grid-rowbody-tr {rowBodyCls}" {ariaRowAttr}>',
        '<td class="' + Ext.baseCSSPrefix + 'grid-td ' + Ext.baseCSSPrefix + 'grid-cell-rowbody" colspan="{rowBodyColspan}" {ariaCellAttr}>',
        '<div class="' + Ext.baseCSSPrefix + 'grid-rowbody {rowBodyDivCls}" {ariaCellInnerAttr}>{rowBody}</div>',
        '</td>',
        '</tr>',
        '</tpl>',
        // RD ->

        {
            priority: 100,
            beginRowSync: function(rowSync) {
                rowSync.add('rowBody', this.owner.eventSelector);
            },
            syncContent: function(destRow, sourceRow, columnsToUpdate) {
                var owner = this.owner,
                    destRowBody = Ext.fly(destRow).down(owner.eventSelector, true),
                    sourceRowBody;

                if (destRowBody && (sourceRowBody = Ext.fly(sourceRow).down(owner.eventSelector, true))) {
                    Ext.fly(destRowBody).syncContent(sourceRowBody);
                }
            }
        }
    ],

    //setupRowData: function(record, rowIndex, rowValues) {
    setupRowData: function(record, rowIndex, rowValues, isSecondRowBody) { // RD
        if (this.getAdditionalData) {
            //Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues));
            Ext.apply(rowValues, this.getAdditionalData(record.data, rowIndex, record, rowValues, isSecondRowBody)); // RD
        }
    }

});

ExtJS 网格中的多个行主体

Multiple row bodies in ExtJS grid

javascript

extjs

sencha-architect