PDA

View Full Version : How to Create nesting grid in ExtJS- 3.3.1??



biswajitpatra
10 Oct 2012, 11:16 PM
How to Create nesting grid in ExtJS- 3.3.1?? which will support row expand. I tried with the rowexpander function for row expand but it didn't work for me. Please help me to solve the problem.

kevin.chen
15 Oct 2012, 3:25 PM
rowexpander is not used to nested another grid in grid, it is used to render a block of html based on XTemplate to expanded grid row.

you need to create rowExpander instance, assign it to grid plugin(this is only for ExtJs 3)





var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});


var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});