I am working on ExtJS application. I wanted to know how to load deeply nested JSON data into gridpanel.
My sample JSON is as follows:
{
"Users": [
{
"id": "1",
"status": "2",
"name": "Sample",
"email": {
"first": "sample@gmail.com",
"second": "sample2@gmail.com"
},
"feeType": [
{
"name": "Asset-class",
"fee": "20",
"billing": "flat"
},
{
"name": "Asset-class",
"fee": "20",
"billing": "flat"
}
]
},
{
"id": "2",
"status": "3",
"name": "Test",
"email": {
"first": "test@gmail.com",
"second": "test@gmail.com"
},
"feeType": []
}
]
}
I have defined three models related to Users, email and fee type array. Also define all the associations correctly.
I have two grids on gui. The first grid requires data of Users array. So this grid is loading data properly. As I have used dataIndex. It's also loading email values as I have used in model definition as
mapping : "email.first"
I have button on first grid. On click of this grid button, another grid opens, which requires the data of "feeType" array. But this second grid is not loading the data. Below is the approach that I worked upon:
Defined the store having root as "Users". And on store.load()
I have taken the second store into a variable like this
var store2=store.feeType()
Now in the second grid pass this variable as store. like this
store:store2
So when I use proxy as memory, data loads into second grid properly from feeType array but when I change proxy as "rest" (as data is meant to come from REST service), data doesn't load into second grid. Why? I think the reason is that that variable store2 doesn't contain any store; that's why grid2 not showing data. But why it is working with memory as proxy then.
Sencha ExtJS is the complete framework. There should be a way to load nested data into the grid. I have defined all the stores and models.
EDIT
After trying a lot I am able to load the nested data in nested grid too. And its working fine with proxy as rest. So I defined all the models and one store accordingly.
Now I want that if the user changes or updates the grid values grid1 as well as grid 2 values, it should update the JSON and send back to the rest service. So even I achived this. But one problem is occurring. As user updates the rows of the grid and clicks the button, on the click event of this button I have written store.sync().
So it is updating the json and sending this updated JSON to rest service. But there is one problem here. For example if there are 2 rows in the grid and user updates both rows and then click button the update api i.e. the rest service is called twice. Why?
Ideally it should be called once only, right? But here it is called twice and at every call when I check the updated data that I am getting at my service end it is returning each row's updated data. For example if there are 3 rows in the grid it will call the update restservice thrice. It should not be this way.
It should call the rest service once keeping all the updates in just one JSON only instead of 3 calls to server and producing 3 updated JSONs.