ExtJS: Master Detail grids using same store

Question

I am new to ExtJS and am trying to find my way around. I am currently making a POC and am stuck at a point.

I am trying to create a master detail page with a Grid in master and a number of tabs in detail each with either a form or grid. Upon selecting a record from master grid on top, a detailed grid should be populated. The catch is, I want to use the same store for both the grids (master & detail) because I want to be able to make changes (add mater rows, add detail rows, remove rows etc) and then save those changes as a batch. Is it even possible? if yes, how should I achieve it? Do I have to use the same store or can I do batch editing some other way?

So far, I have tried to bind currently selected row to ViewModel (according to this question) and tried the following to bind data to detailed grid

               bind: {
                    data: {
                        bindTo: '{selection.Details}',
                        deep: true
                    }
                }

Any help?

Update 1:

In my store, my data is in the following format (hence the same store for master-detail)

 items:
        [
            {
                Name: "ABC",
                Details:[
                         { 
                           detail1: 'asdf',
                           detail2:'qwerty'
                         }
                        ]
            }
        ]

Update 2:

Please see the following image.

This is what I am trying to achieve. I want to use store for Master-Detail data. Is it possible? if yes, how?

Update 3

I have created a fiddle to further clarify what I am asking for

There's an example of it here: examples.sencha.com/extjs/6.0.1/examples/kitchensink/…, but I don't know what you mean by "I want to use the same store". If it's the same store, how is it a detail view? — Evan Trimboli
you can pass the store between views inside the master view or get it from the StoreManager. since you gave only a piece of code I can't recommend on the right way — aviram83

aviram83 aviram83 · Accepted Answer · 2016-03-27T05:26:09

According to your fiddle I have added a solution here

If you look at sencha docs you can see:

The initial set of data to apply to the tpl to update the content area of the Component.

so binding to data a dynamic value won't work.

ExtJS: Master Detail grids using same store

1 Answers