如何将面板添加到rowBody中的extjs网格面板

我不想在extgrid面板中添加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
        };
    }
}],

功能：[{
F类型：“rowbody”，
getAdditionalData:函数（数据、行索引、记录、源）{
var headerCt=this.view.headerCt，
colspan=headerCt.getColumnCount（）；
//通常您会在CSS文件中设置MyBody类的样式
返回{
行正文：“”+记录。获取（“说明”）+“”，
rowBodyCls：“我的身体课”，
rowBodyColspan:colspan
};
}
}],

但我不想使用rowBody，而是希望包括一个标准面板，这样我就可以添加按钮和其他布局

---

就是这样吗？

这就是我用自定义面板替换rowBody的方法

在我看来，我创建了以下内容：

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

还有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);

onExpandBody:function（rowNode、record、expandRow）{
var row='grouprow-'+record.get（'groupId'）；
var elem=document.getElementById（行）；
elem.innerHTML=''；
var innerPanel=Ext.widget（'panel'，{
html:''+record.get（'description'）+'
'，
身高：100，
弹性：1，
边界：0
}]
});
innerPanel.render（行）；

---

不是每次使用定义组件的xTemplate来呈现此id时都创建面板。

我使用的是ExtJS 4.2，为了使其正常工作，控制器代码如下所示：

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

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
        },
    });
},
}

Ext.define（'My.controller.MyController1'{
扩展：“Ext.app.Controller”，
onGridPanelExpandbody:函数（行节点、记录、expandRow、eOpts）{
变量id='组行-'+记录.get（'id'）；
var tpl=新的Ext.XTemplate（“”，
“{}.{$}-{.}
”，
'');
var el=document.getElementById（id）；
第三方物流覆盖（el、记录、数据）；
},
init：函数（应用程序）{
这是我的控制({
“gridpanel[itemid='usergroupsList']tableview”：{
expandbody:this.OnGridPanel expandbody
},
});
},
}

请注意区别，您的

grid

，我的代码是

gridpanel tableview