View Full Version : grid within grid and event propagation

26 Nov 2007, 12:36 PM
I am attempting to use a grid within a grid (as a rowExpander) but I am having some issues with events from the inner grid also making it out to the outer grid. specifically, clicking on the header in the inner grid to sort the column causes the outer grid to try to sort on column -1 (which obviously errors). mouseover row highlighting also happens for rows with the same index at the same time when hovering over a row in the inner grid.
Is there an easy way to stop all events from propagating from a nested object up to its parent?

27 Nov 2007, 8:39 AM
no ideas at all here?
i thought I would just go in and brute force override all the events, but cant even figure that out. is nested grids something that nobody has had a use for yet?

27 Nov 2007, 8:59 AM
Didn't somebody do this in Examples? I'm pretty sure that there is a thread regarding putting widgets in the grid. Maybe not another grid, but might get you started.

27 Nov 2007, 9:51 AM
yeah ive been trying to search for anything similar, but apparently havent gotten the right combination of search terms yet :)

27 Nov 2007, 10:11 AM
Maybe this one http://extjs.com/forum/showthread.php?t=6042

27 Nov 2007, 10:50 AM
thanks for the link, but it doesnt seem to cover the specific problem i have, which I think is related to having the same type of widget nested (gridPanel in this case).
I have managed to modify the parent grid's (actually gridView) onHeaderClick handler to ignore clicks intended for the child grid since it winds up getting an index of -1, but this is hardly the correct solution. and it doesnt give me a solution for rowSelect and RowOver/RowOut since I dont seem to have enough information available to tell the difference between its own events and the child grid's events.
nothing i do to the child grid or view's event handlers has any effect whatsoever since I dont seem to have access to the event object (or havent found it yet).
It sure would be nice if there were a config option to prevent all events from propagating outside a given object...

28 Nov 2007, 9:08 AM
can you post your code to implement the grid within a grid? I need the same functionality and if I can utilize the code it would be helpful.


28 Nov 2007, 10:16 AM
well theres not much to it, and i cant post my code without sanitizing it first, but will try to post some of it. Ive also managed to mix it up pretty good with all the different things i have been trying to use to solve my problem.
essentially all I did was take the rowExpander example and put some code into the beforeExpand handler that creates a grid and inserts it into the row body (which is passed to the handler).
I also give it a unique id so that i can have more than one open, as well as being able to find it to destroy it in the collapseRow handler (as garbage collection).

18 Dec 2007, 10:57 AM
devnull, have you tried overriding the outter grid's getClassRow() function?

9 Jan 2008, 12:30 PM
I was having the same problem as you with nested grids. This seemed to work for me:

innerGrid.getGridPanel().getEl().swallowEvent( 'mouseover'); where getGridPanel() is a method I created to retrieve the active gridPanel. You can just swallow events as necessary. Hope this helps.