如何将面板添加到 rowBody 中的 extjs 网格面板
Posted
技术标签:
【中文标题】如何将面板添加到 rowBody 中的 extjs 网格面板【英文标题】:How to add a panel to extjs Grid Panel in rowBody 【发布时间】:2012-06-22 19:08:51 【问题描述】:我不想在 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,以便我可以添加按钮和其他布局。
这可能吗?
【问题讨论】:
【参考方案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
【讨论】:
【参考方案2】:这就是我用自定义面板替换 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 定义一个组件来渲染到此 id,而不是每次都创建面板。
【讨论】:
以上是关于如何将面板添加到 rowBody 中的 extjs 网格面板的主要内容,如果未能解决你的问题,请参考以下文章
在编辑主网格行时,rowBody 刷新丢失内部网格。 extjs 3..我可以重新渲染内部网格..吗?