Multiple Grids to achieve Nested Grids functionality

1
votes

I am aware of what a RowExpander plugin is for a Grid, where each row in a Grid expands to show it's childs or related store data. My requirement is a bit different.

  1. I need multiple Grids on a page. Each Grid is loaded with data from different backend DB tables TB1, TB2, TB3.

  2. However, each of the backend DB tables have a one to many relationship with each other. That is, each row in TB1 has multiple rows in TB2. One row in TB2 has multiple rows in TB3.

  3. Now, I need one grid for each of these tables on UI. And then if I select a particular row in the first Grid ( relavant to TB1 ), I should populate the second grid with the relavant records from TB2. And then if I select a row in the grid corresponding to TB2, I should populate third grid with all the records relavant to the row selected from TB3.

I hope I am clear. Could you please help me with any sample code that you might have?

1
extjsextjs4

1 Answers

2
votes

Subscribe to select (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-event-select) event of the TB1 and then filter store associated TB2 with whatever filter criteria you need - this way second grid will be automatically filtered to the records you need to show.