How do I put a grid into a cell of another grid with ExtJS 4.1

3
votes

I read about this rowexpander feature of grids in ExtJS, but this only works, like the name suggests, for rows. I'd like to put grids into single cells of another grid, to display detailed data. I read that it is possible to nest anything into any component with ExtJS4, but I can't find an example of this.

What I want to do:

Use a big grid for my data, but one field of the records has about >20 sub-entries. So I would like to put everything in one row, but the one field should be a 1-column grid in 1 field of every row. So the user can scroll to this one cell and I keep the width of rows small.

ID | hits | key/value
1  | 123  | a = 2rtr
---------------------
2  | 234  | a = 53jgh
---------------------
3  | 345  | a = 10asd     <--- 1 column table/for scrolling
   |      | b = 111asd
   |      | c = 123adsad
   |      | ...
---------------------
4  | 456  | b = xyz
1
javascriptextjsgridextjs4

1 Answers

1
votes

With a LOT of work you might be able to embed a grid into a cell but I would never recommend that. IF you can get it to work it will perform very badly. Grids are not meant to be nested like tables. Perhaps you can use header grouping instead to get what you want.

http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

Otherwise you can define a custom renderer for a column that injects a HTML table