PDA

View Full Version : Details data in Grid



CutterBl
21 Aug 2007, 11:23 AM
OK, don't know if this is possible, but I figured I would ask. I have a paging grid with 10 columns. What I would like to do is:


click a row
have a 'details' section expand/accordian out below the record
populate this new space with information I retrieve with an Ajax call


The row click? No problem. The Ajax call? No problem. The rest of it? Well, I'm not even sure it's possible. Anyone? Any ideas?

BernardChhun
21 Aug 2007, 12:13 PM
hey cutterBl,

you need to switch the column's renderer to make the "expand" happen.

look at the source code of this example : http://extjs.com/deploy/ext/examples/grid/paging.html

the different renderers are on line 37 of the paging.js file
the renderer switcher is on line 118.

you will probably have to use an animation between the renderer switch though :)

good luck

CutterBl
21 Aug 2007, 1:49 PM
Bernard, I'm not sure that would work? The renderer is specific to the column/cell. If I apply a custom renderer (as in the example) that would only take care of a single column within my grid, which is 10 columns wide. The details I would want to show would need to span the full width of the grid, possibly even containing a grid of it's own (though unlikely with the IE issues I fought yesterday). Unless I am thoroughly missing something, but it doesn't seem so from the example of the paging grid.

BernardChhun
21 Aug 2007, 2:29 PM
ohh I see! You're looking for something like the first grid in this example:

http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html

unfortunately, it's from Ext 2.0's new gridView :(

as for my answer earlier, I was thinking about making 10 custom renderers and making it look like a single row with CSS...but that might way too much work...