Как добавить панель в extjs Сетка панели в rowBody

Question

Я не добавлю панель ext вместо html в панель дополнительной сетки. То, что я сейчас это:

features: [{ 
    ftype: 'rowbody', 
    getAdditionalData: function (data, rowIndex, record, orig) { 
     var headerCt = this.view.headerCt, 
      colspan = headerCt.getColumnCount(); 
     // Usually you would style the my-body-class in CSS file 
     return { 
      rowBody: '<div style="padding: 1em">' + record.get("description") + '</div>', 
      rowBodyCls: "my-body-class", 
      rowBodyColspan: colspan 
     }; 
    } 
}], 

Но вместо rowBody я хотел включить стандартную панель, так что я мог бы добавить кнопки и другие компоновки.

Это возможно?

Answer 1

Так это то, что я сделал, чтобы заменить rowBody с пользовательской панелью

На моем взгляде я создаю это:

plugins: [{ 
    ptype: 'rowexpander', 
    rowBodyTpl : ['<div id="group-row-{groupId}"> </div>'] 
}] 

В моем контроллере я добавил expandbody слушателя, как это:

'myList grid[itemid = usergroupsList]' : { 
    select: this.onSelect, 
    expandbody: this.onExpandBody 
} 

и onExpandBody

onExpandBody: function(rowNode, record, expandRow) {     
    var row = 'group-row-' + record.get('groupId'); 
    var elem = document.getElementById(row); 
    elem.innerHTML = ''; 
    var innerPanel = Ext.widget('panel',{     
     html: '<p>'+record.get('description')+'</p>', 
     height: 100, 
     flex: 1, 
     border:0 
     }] 
    }); 
    innerPanel.render(row); 

Вместо того, чтобы создавать панель каждый раз, когда вы можете использовать xTemplate для определения компонента для рендеринга этого идентификатора.

Answer 2

Я использую ExtJS 4.2, для того, чтобы заставить его работать, код контроллера выглядит следующим образом:

Ext.define('My.controller.MyController1', { 
extend: 'Ext.app.Controller', 

onGridPanelExpandbody: function(rowNode, record, expandRow, eOpts) { 
    var id = 'group-row-' + record.get('Id'); 
    var tpl = new Ext.XTemplate('<tpl foreach=".">', 
           '<p> {#}.{$} - {.}</p>', 
           '</tpl>'); 
    var el = document.getElementById(id); 
    tpl.overwrite(el,record.data); 
}, 

init: function(application) { 
    this.control({ 
     "gridpanel[itemid='usergroupsList'] tableview": { 
      expandbody: this.onGridpanelExpandbody 
     }, 
    }); 
}, 
} 

Обратите внимание на разницу, ваш grid, мой код gridpanel tableview