extjs 4 rowexpander with grid - Rqna

bookmarkalikeInternet and Web Development

Dec 14, 2013 (7 years and 7 months ago)


extjs 4 rowexpander with grid
Asked by
Venkatesh A
on 2012-10-31T06:08:02-04:00
Can any one help me to solve Grid Row Expander with child grid. Getting value as a plain text works

Is there any way we can create a Grid inside a Grid to get value from JSON data?

I want to create this structure using MVC architecture.. Please give some ideas or solutions.


Ext.define('CSApp.view.ContentGrid', { extend: 'Ext.grid.Panel', store: 'Details', width: 840,
height:45, initComponent: function() { this.columns = [ {header: 'TASK ID', dataIndex: 'taskID',
flex:1}, {header: 'ITEM', dataIndex: 'name', flex:1}, {header: 'EXISTING VALUE', dataIndex: 'value',
flex:1}, {header: 'NEW VALUE', dataIndex: 'newValue', flex:1}]; this.callParent(arguments); } });
Technology Questions and Answers
Programmers Questions and Answers
Oct 31st, 2012 Archives
Week 44, 2012 Archives
October, 2012 Archives
Best Answer
Answered by
on 2012-10-31T12:34:06-04:00
RowExpander does not allow for a nested grid structure. All it allows is to insert any HTML in the
row body. Which means that you can create an HTML table inside the expanded row, but it is not
another Ext Grid.

All Answers
Answered by
on 2012-10-31T14:34:25-04:00
I had a similar scenario: a list of customers with their own record data (address, phone, account
balance, etc...) each customer also had an account with a set of "paid for" items. In other words I
needed a grid of customers that could be rowexpanded to open their own "Account Grid" showing a
grid of items with related data about the items, how much they paid, etc.

I slimmed out a bunch of disrelated configs and other code but here's an example of the view I
used for the "outer" grid:

Page 1/2
extjs 4 rowexpander with grid

Ext.define('MyApp.view.CustomerGrid', { extend: 'Ext.grid.Panel', alias: 'widget.customergrid',
requires: [ 'Ext.ux.RowExpander' ], title: 'Customer Grid', plugins: [{ ptype: 'rowexpander',
pluginId: 'rowexpander', selectRowOnExpand: true, // this gives each row a unique identifier based
on record's "acct_no" rowBodyTpl: [ '
' ], // stick a grid into the rowexpander div whenever it is
toggled open toggleRow: function(rowIdx) { var rowNode = this.view.getNode(rowIdx), row =
Ext.get(rowNode), nextBd = Ext.get(row).down(this.rowBodyTrSelector), hiddenCls =
this.rowBodyHiddenCls, record = this.view.getRecord(rowNode), grid = this.getCmp(), acctNo =
record.get('acct_no'), targetId = 'AccountGridRow-' + acctNo; if (row.hasCls(this.rowCollapsedCls))
{ row.removeCls(this.rowCollapsedCls); this.recordsExpanded[record.internalId] = true;
this.view.fireEvent('expandbody', rowNode, record, nextBd.dom); if (rowNode.grid) {
nextBd.removeCls(hiddenCls); rowNode.grid.doComponentLayout(); rowNode.grid.view.refresh();
} else { // this is the store for the inner grid Ext.create('Ext.data.Store', { model:
'MyApp.model.Account', proxy: { type: 'ajax', url: 'customers', reader: 'json' extraParams: {
account: acctNo } }, autoLoad: { callback: function() { // create the inner grid and render it to the
row nextBd.removeCls(hiddenCls); var grid = Ext.create('MyApp.view.AccountGrid', { //
Basically I
just overrode the
function to stick another grid (
) into the
rowexpander div.

This worked out very well and the app is completed now.

I have the data for the inner "account" grid in a cached object so that the ajax returns within 50 -
100 ms. If you had some kind of long query to get the inner grid data I could see this being

View Online
Page 2/2