我不想在ext网格面板中添加一个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,这样我就可以添加按钮和其他布局。
这是可能的吗?
答案 0 :(得分:1)
我正在使用ExtJS 4.2,为了使其工作,Controller代码如下所示:
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
答案 1 :(得分:0)
所以这就是我用自定义面板替换rowBody的方法
在我看来,我创造了这个:
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : ['<div id="group-row-{groupId}"> </div>']
}]
在我的控制器中,我添加了一个像这样的扩展侦听器:
'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定义组件来渲染此id,而不是创建面板。