PDA

View Full Version : Nested Grid ??? Or is it more like Grouping Grid + Expander plugin ???



vince_cole
20 Nov 2013, 4:10 AM
Hello, my first post here. I am just getting started with Ext. Bit of a newbie I reckon...
Can you help me please?

I have some rows of data, to present, in a grid.
Some parent-child relationships exist between the rows (a parent can have zero to many children; a child has exactly one parent and no children of its own).

Initially, I want all children hidden, but for each parent row to have an 'expand' button, which shows all of that parent's child rows (immediately below the parent row). I think I am trying to make something like a nested grid here ...?

I want it to work a bit like the grouping grid example and ALSO like the expander row example:
http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/grouping.html
http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/grid-plugins.html (grid 1)
But neither of these examples do exactly what I want...
I need to show something which looks like the expander grid, but when you click the 'expand' button, what appears is not just a single cell of data, but some rows of data (like the grouping example).

What do I need to do here? Munge the 2 together, or start from scratch...?

OR.. would it be best to start with a basic grid grid (eg. http://dev.sencha.com/deploy/ext-3.3.1/examples/grid/array-grid.html) ? I guess then the work to do next would be:
add a column to the grid, for putting the expander buttons in
store the parent-child relationships, in a variable somewhere, once the data has been loaded
add an expander button, to each parent row, with its handler set to toggle its child rows' visibility
define a custom sort function (which ignores the children, as they always need to follow their parent)

Many thanks in advance :)
cheers, Vince

slemmon
22 Nov 2013, 10:37 PM
And you'll be working with Ext 3, not Ext 4 is that correct?

vince_cole
23 Nov 2013, 12:33 AM
Ext 3.

vince_cole
3 Dec 2013, 2:13 PM
RESOLVED... I am now just putting all the data in the same store, and defining an action column in the grid, which contains an expand/collapse button (for rows which have children) which then toggles a flag in the data of all of its child rows. Then I am filtering the store on that flag. Am using a custom sort to ensure all the child rows are displayed immediately below their parent in the grid.