PDA

View Full Version : Nested Grids with RowExpander in ExtJS 3.0



Mikhus
11 Dec 2009, 9:03 AM
Hi All.

Actually I have tried to solve the problems on grids nesting for my application. To resolve this issue I stopped at solution by modifying RowExpander plugin.

Here is an example of what I've got: http://mikhailstadnik.com/ext/examples/nested-grid.htm
It contains also links to a source code of modified RowExpander plugin and to an example source itself.

Here is a screenshot:
http://mikhailstadnik.com/wp-content/uploads/2009/12/nested-grids-screen.png


Hope this helps anyone.

P.S. All suggestions and comments are welcome. I will update a source as soon as new suggestions and decisions will be implemented.

jay@moduscreate.com
11 Dec 2009, 9:33 AM
Awesome. I know a lot of folks want to do this.

vladsch
11 Dec 2009, 10:28 AM
Hi,

You do not destroy previous instances of grids. Try to expand/collapse of one row several times and you will see that 'Ext.ComponentMgr.all.length' always increase.

When I was implementing the same functionality I made lookup array and put all created nested controls to that array and remove previous instances when it is required (for example, before grid's view refresh, before row remove and etc)

So, you have to think about safely destroy nested controls to avoid memory leakage

Thanks for sharing your implementation of this task

Mikhus
11 Dec 2009, 4:42 PM
Thanks, vladsch, for your notes!

It is solved for now, so I have updated an example and code.

vladsch
11 Dec 2009, 4:57 PM
Hi,

It is better but there are problems still
For example, try one of the following after row expanding

1. Sort using header menu (instead clicking on header)
2. Add editor to the any cell and try edit cell (and complete editing)
3. Try remove record which has expanding row
4. Call grid.view.refresh() (for example, that function is called when new data is loaded)
5. Move columns

All of those force memory leakage

P.S. Also I think it is incompatibility with BufferView

Mikhus
11 Dec 2009, 5:02 PM
Oh, yes, yes... I will fix them all, but not today :)

Mikhus
12 Dec 2009, 5:08 AM
1. Sort using header menu (instead clicking on header)
2. Add editor to the any cell and try edit cell (and complete editing)
3. Try remove record which has expanding row
4. Call grid.view.refresh() (for example, that function is called when new data is loaded)
5. Move columns

P.S. Also I think it is incompatibility with BufferView

1,2,4,5 - done and tested (looks like working).

3 - not tested yet, but seems to be ok, I will check later (have no time right now).

P.S. Yes, true for BufferView, but in my case I don't care about it. As for me it's beter have grids totally removed after close a node. Maybe someone who definitely needs this functionality could implement it. At this point I'm going to say that it is known bug, so read it as known "feature" :)

dawesi
14 Dec 2009, 6:35 PM
too cool for school... playing now :-)

cherbert
16 Dec 2009, 8:43 AM
Is there a way to populate this grid from a PHP Array?

Mikhus
25 Dec 2009, 6:33 AM
Is there a way to populate this grid from a PHP Array?

In example grids created from array. Or maybe you need something else?

hmezamx
9 Mar 2011, 8:37 PM
Is this supported natively in Extjs 4? I will be needing to implement a few of these but based on the demos I've looked it doesn't to support it or if some can point me to example that would be great.

screate
10 Mar 2011, 12:01 PM
It is solved for now

Komal Vaswani
31 May 2011, 1:34 AM
Hi,
I am also trying the same example given at http://mikhailstadnik.com/ext/examples/nested-grid.htm
I have changed my RowExpander.js file with the one given in this link. and have written the same code. Should I need to do any more changes bcz it doesnt display anything. I thin the problem is with this code


var expander = new Ext.ux.grid.RowExpander({
tpl : '<div class="ux-row-expander-box"></div>',
actAsTree : true,
treeLeafProperty : 'is_leaf',
listeners : {
expand : function( expander, record, body, rowIndex) {
getGrid( data, Ext.get( this.grid.getView().getRow( rowIndex)).child( '.ux-row-expander-box'));
//alert( Ext.ComponentMgr.all.length);
}
}
});


should I have to do changes in ext-all.js file? :(
Thanks,
Komal

SAP
5 Aug 2011, 12:47 AM
i try so many times to edit the cell but its not done plz help me in this

vajrakumar.d
25 Nov 2011, 2:06 AM
I implemented this example in code but the tooltip which I was showing on images in a column are not coming if I add this plugin.

If I remove this plugin they are coming.

So what need to be changed ?

classic037
23 Jan 2012, 1:48 AM
@ nested level grid data not align properly ( after 4th column ) any fix ?

oturkan
10 Feb 2012, 9:37 AM
hi. i'm new user for ext js. I need every nested grid has different data. is that posible