PDA

View Full Version : How create a nested grid using ext js 4?



simonr25
23 Dec 2011, 11:51 AM
Hello,
Please can you inform me (pref. with code) how to create a nested grid using ext js 4.
I require that the nested grid displays dynamic data - prob. by making an ajax request
for the required data.
I've been attempting to use Ext.ux.RowExpander.
Have spent several hours searching for suitable examples without success.
The example given on the sencha site uses a grid's rowexpander to display text
rather than another grid.


Please could you explain what I'm doing wrong / how to correct in the 2 samples below:
for the first, the error msg (at line this.view.on) is:
Uncaught TypeError: Cannot call method 'on' of undefined
(I think view is not defined - how rectify this?)
for the second, the error msg is:
Uncaught TypeError: Cannot read property 'features' of undefined





var grid1 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
columns: [
{text: "Company", flex: 1, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
width: 600,
height: 300,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
['<div id="nestedGridRow-{company}" ></div>']
]
}],
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsible Grid',
iconCls: 'icon-grid',
renderTo: Ext.getBody(),

initComponent: function() {
this.view.on('expandbody', function (rowNode, record, expandRow) {
var targetId = 'nestedGridRow-' + record.get('company');
var nestedGrid = Ext.create('NestedGrid', {...
parentCategory: record.get('company'),
renderTo: targetId
});
rowNode.grid = nestedGrid;
nestedGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick']);
});


this.view.on('collapsebody', function (rowNode, record, expandRow) {
rowNode.grid.destroy();
});
}
});






var expander = Ext.create('Ext.ux.RowExpander',{
rowBodyTpl : [
'<p><b>Company:</b> </p><br>',
'<p><b>Summary:</b> </p>'
]
});



kind regards,
Simon

mitchellsimoens
23 Dec 2011, 11:55 AM
You basically are just rendering a grid within an element. You will need to handle sizing and probably selection.

simonr26
23 Dec 2011, 12:13 PM
Hello,Thank you for your response.
I don't actually understand the reply. Is this for the 1st or 2nd code segment?
Which element do you mean?
How do I find out whether I need to handle sizing/selection?
for the first code segment - I think the view is undefined - how do I rectify this?
kind regards,
Simon

mitchellsimoens
23 Dec 2011, 12:21 PM
You have to resolve the element you want to render the grid into first.

simonr26
23 Dec 2011, 12:46 PM
Hello,Thank you for reply. Can you explain how I resolve the element? The grid is being rendered into targetIdwhich has been resolved.In order to avoid confusion, I have removed the part of the code below which is redundant - the error message still occurs. There is other code such as creating the store etc.kind regards,Simon

var grid1 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
columns: [
{text: "Company", flex: 1, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
width: 600,
height: 300,
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
['<div id="nestedGridRow-{company}" ></div>']
]
}],
collapsible: true,
animCollapse: false,
title: 'Expander Rows in a Collapsible Grid',
iconCls: 'icon-grid',
renderTo: Ext.getBody(),

initComponent: function() {
this.view.on('expandbody', function (rowNode, record, expandRow) {
var targetId = 'nestedGridRow-' + record.get('company');
});


this.view.on('collapsebody', function (rowNode, record, expandRow) {
rowNode.grid.destroy();
});
}
});