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网格中的多个行体

1 个答案: