Несколько строк в сетке 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 
     } 
    } 

});