How can we hide and show the row of grid panel in ext js 4.2?

Question

Hello there, I have grid panel with rows and there is a column name ID which is duplicate correspond to others values e.g:-

ID    Type    Status
--------------------------
1      A      True
1      B      True
1      C      False
1      D      False
1      E      False
2      A      True
2      B      False
2      C      False
2      D      False

and I need like below one: so when I click on [Show all record..] the Id of 1 records will be shown. same as for Id 2 and so on....

ID    Type    Status
--------------------------
1      A      True
1      B      True
Show all record..
2      A      True
2      B      False
Show all record..

Output will be after click on Show all record....

   ID    Type    Status
  ----------------------------
    1      A      True
    1      B      True
    1      C      False
    1      D      False
    1      E      False
    2      A      True
    2      B      False
    Show all record..

Hope you can understand what i have to achieve.

Thanks & Regards vik

Answer 1

You could use the id column as a group, in the grouping grid you would have the option to expand or collapse the records which share the same value, although it will not show the first neither the second record if the group is collapsed.

See this example: http://docs.sencha.com/extjs/4.2.1/#!/example/build/KitchenSink/ext-theme-neptune/#grouped-grid

Answer 2

There is no such view or plugin that would do exactly what you need (neither in Ext 4.x nor Ext 5.x) so it would require a considerable amount of coding to implement it.

The closest you can get without custom coding is, as advised by Elias, the grouping grid or, probably not so close, the tree grid.

Answer 3

One easy way to achieve it may be use single grid, for each ID, it may hamper the performance. So, the idea is:

1) Create a separate grid for each ID, with separate store

2) Limit the number of rows you want to set visible at one time (use getRange() in store)

3) Add a button, corresponding to each grid, and perform the action of Show All rows on click, refresh the grid, hide the button (or change the text to collapse, and handle the click event)

Note: It will be slow

You can think of better way to achieve this, this approach surely will not require much coding