0

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. What I want to achieve using extjs

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

Community
  • 1
  • 1
U.P
  • 7,357
  • 7
  • 39
  • 61
  • There's an example of it here: http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/#binding-child-session, 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 Mar 21 '16 at 09:04
  • @EvanTrimboli. I have updated my question. – U.P Mar 21 '16 at 09:34
  • 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 Mar 22 '16 at 06:33
  • @aviram83 I have updated my question. please take a look – U.P Mar 22 '16 at 07:00
  • can you create a small example in [fiddle](http://fiddle.sencha.com)? – aviram83 Mar 23 '16 at 11:00
  • @aviram83 I have created the fiddle. Please take a look – U.P Mar 24 '16 at 08:48

1 Answers1

2

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.

aviram83
  • 880
  • 11
  • 15
  • If I add & remove records from detail grid, the change is not registered with the main store which means, syncing the main store doesn't fire Ajax requests. Any Idea? I tried marking the selected row as dirty but the payload to server contains the original detail records and not the updated ones – U.P Mar 28 '16 at 10:08
  • since you work on different store they are not sync, what you can try do to is when you add record (catch add/remove event) go to main store and add a record to the selected one. – aviram83 Mar 29 '16 at 07:17
  • Sure. Will try that. What I don't understand is that if I change something in the detail grid record, the change is made to the main store but if I add a detail record or remove one the change is not permanent. i.e. if I go to another record and come back I see my only the updated record and not the newly added or deleted record – U.P Mar 29 '16 at 08:39