Code:
//Insert a child row under the parent grid's row. Note the child grid's column headers don't
//line up with the child grid's column rows
function afterRender(parentGrid) {
var row = parentGrid.view.getRow(0);
var rowBody = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
var childStore = new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['Child Col A', 'Child Col B', 'Child Col C', 'Child Col D', 'Child Col E', 'Child Col F', 'Child Col G', 'Child Col H', 'Child Col I', 'Child Col J', 'Child Col K'],
data: [
['Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data'],
['Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data', 'Test Data']
]
});
var childGrid = new Ext.grid.GridPanel({
store: childStore,
columns: [
{ header: 'Child Col A', dataIndex: 'Child Col A' },
{ header: 'Child Col B', dataIndex: 'Child Col B' },
{ header: 'Child Col C', dataIndex: 'Child Col C' },
{ header: 'Child Col D', dataIndex: 'Child Col D' },
{ header: 'Child Col E', dataIndex: 'Child Col E' },
{ header: 'Child Col F', dataIndex: 'Child Col F' },
{ header: 'Child Col G', dataIndex: 'Child Col G' },
{ header: 'Child Col H', dataIndex: 'Child Col H' },
{ header: 'Child Col I', dataIndex: 'Child Col I' },
{ header: 'Child Col J', dataIndex: 'Child Col J' },
{ header: 'Child Col K', dataIndex: 'Child Col K' }
],
autoHeight: true,
renderTo: rowBody
});
}
Ext.onReady(function() {
var parentStore = new Ext.data.ArrayStore({
autoDestroy: true,
fields: ['Column A', 'Column B', 'Column C'],
data: [
['Top Data', 'Top Data', 'Top Data']
]
});
var parentGrid = new Ext.grid.GridPanel({
renderTo: 'nestedGridDiv',
height: 300,
store: parentStore,
cm: new Ext.grid.ColumnModel({
columns: [
{ header: 'Column A', dataIndex: 'Column A' },
{ header: 'Column B', dataIndex: 'Column B' },
{ header: 'Column C', dataIndex: 'Column C' }
]
}),
viewConfig: {
forceFit: true,
enableRowBody: true
}
});
parentGrid.on('viewready', afterRender, this);
});