带有extjs 4的嵌套网格 [英] Nested grid with extjs 4
本文介绍了带有extjs 4的嵌套网格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以将网格放置在另一个网格的插件中.
I can put grid in the plugins of another grid.
这是我的网格,我想放入config'plugins'ext网格.
this is my grid and I want to put in the config 'plugins' ext grid.
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'Customer Name', dataIndex: 'CustomerName', width: 212 },
{ header: 'Charge Date', dataIndex: 'ChargeDate', width: 212 },
{ header: 'Package Plan', dataIndex: 'PackagePlan', width: 212 },
{ header: 'Current Invoice Sum', dataIndex: 'CurrentInvoiceSum', width: 212 }
],
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['<div style="background-color:#CBDDF3; width:643px;margin-left:147px;margin-bottom: 20px;border: 1px solid;">',
'<p><b>Customer Details:</b><br/>{CustomerName}<br/> {CustomerAddress}, {CustomerPhone}, {CustomerEmail} </p>',
'<p><b>Package Type:</b> {PackagePlan}<br/>',
'<b>Invoice Details:</b></p>',
'<div class="nestedO" id="{InvoiceId}"></div> </div>',
]
}],
width: 900,
height: 450,
renderTo: Ext.get('Ongoing')
});
有可能吗?
推荐答案
嵌套网格是可能的.这是Sencha论坛中的解决方案:
Nested grids are possible. Here is a solution from Sencha forums:
您几乎明白了.在插件部分,我们将创建一个空的div,将嵌套网格呈现到该div:
You almost got it. In the plugin part, we will create a empty div to which we will render our nested grid:
plugins: [{
ptype: "rowexpander",
rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>']
}],
当用户扩展网格行时,我们会将嵌套的网格渲染到其中.
And when user expands the grid row, we will render the nested grid into it.
expandbody : function(rowNode,record, expandbody) {
var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
if (Ext.getCmp(targetId + "_grid") == null) {
var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', {
renderTo: targetId,
id: targetId + "_grid"
});
rowNode.grid = sessionInstructionGrid;
sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') });
}
}
这篇关于带有extjs 4的嵌套网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文