PDA

View Full Version : Using objects in Ext.ux.RowExpander rowBodyTpl wrap



gmillerd
12 Jun 2011, 10:00 PM
Hello, I am trying to develop a grid that expands to show some Ext objects (small sparkline like charts). But it seems this just isn't possible with the wrap or I am missing the syntax. Obviously not as easy as handing an object with items: [] off it.

Right now I am tossing a conventional <div id="{nodeid}"></div> into the rowBodyTpl and then targeting that with a renderTo which I am not too found of.

I could have sworn a example existed of a nested grid, but it maybe jqgrid on a ext page.

Thanks!

Stan C
14 Jun 2011, 7:54 AM
I have a similar need. I am trying to create a nested grid functionality in extjs 4. My issue is that I can't get rowexpander to display another grid (displaying text works fine). I need to make it look like this: http://examples.ext.net/#/GridPanel/RowExpander/MultiLevel_GridPanel/ using pure extjs 4.
Can someone point me in the right direction?

Yuriksan
14 Jun 2011, 8:19 AM
If I use a selection model the nested grid is placed inside a td with the wrong colspan, something I think I can fix in the ux, but for now I've commented it out.
// selModel: Ext.create('Ext.selection.CheckboxModel'),

When I add a second level, that nested grid does not have the correct height and is obscured. I suspect because the parent grid does not know of it's existence, and can't resize itself.

I hope the below helps you guys get as far as I have.

plugins: [{
ptype: 'rowexpander',
rowBodyTpl: ['<div id="IssueSubCategoryGridRow-{Name}" ></div>']
}],

then in initComponent I set up the following

this.view.on('expandbody', function (rowNode, record, expandRow) {
var targetId = 'IssueSubCategoryGridRow-' + record.get('Name');
var subCategoryGrid = Ext.create('IssueManagement.IssueSubCategoryGrid', {
parentCategory: record.get('Name'),
renderTo: targetId
});
rowNode.grid = subCategoryGrid;
subCategoryGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick']);
});

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

gmillerd
14 Jun 2011, 8:39 AM
Yeah, I had to make my hack trigger on expansion event as well. There is some sort of event firing that makes the grid jump a bit.

simonr25
28 Dec 2011, 1:29 AM
Hello,
Having observed this post I am having difficulty using ext js 4 RowExpander and creating a nested grid.
Was wondering if you had some sample code?
Thank you,
Simon

Stan C
28 Dec 2011, 7:38 AM
I ended up using linked grids instead.

mom_vincent
17 Feb 2012, 2:28 AM
Hi Stan

Could you elaborate? I can't find any information on these so-called 'linked grids'.