Multiple row bodies in ExtJS grid

Question

Is there a way to show multiple row bodies for each row in ExtJS grid?

The thing is that I need to show one before and one after each row. I could have two row bodies (one with property showBefore: true) but you can only add one row body as far as I know.

Is there an easy way to do this? It looks to me like there is no other way than to write an override.

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

});