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
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.