0

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
ryan
  • 333
  • 1
  • 15
  • 28
  • Please answer someone. – ryan Jun 21 '14 at 10:06
  • maybe you should try Ajax store. Set reader type as json. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store – Vlad Jun 22 '14 at 19:49
  • Can you add code how does you store look like? Its not clear how do you fetch the grids with data. So you load the data into global variable and then separate into arrays and then load into grids, or how? – Vlad Jun 22 '14 at 19:51
  • Used this as a store in nested grid. store:store.getAt(rowIndex).feeType(); where rowIndex is the row on which user click on the parent grid. In fact it showed the data also but when I change it into rest proxy it doesn't load the data in the nested grid. Even with the ajax it is not loading the data.so taking as a memory proxy and working fine with it. The store definition is simple which has data:data(data as shown in above post), proxy:memory and reader{type:json,root:Users} and yes this store definition has been saved in a global variable named store. – ryan Jun 23 '14 at 18:52
  • Can you put up a working example on http://sencha.walkingtree.in/playground/ ? It will be a lot easier for us to help you – player Jun 24 '14 at 04:45
  • A store need a model. So you should model things first then load into store. Also maybe the problem is not on the client side. What do you use for server side? PHP, Java, does the web service sends data at all? Add code please. – Vlad Jun 24 '14 at 06:30
  • You can create a model called FeeType then model called Email. After these create a model Users and association hasMany of type FeeType and mabe hasOne for Email. Something like that – Vlad Jun 24 '14 at 06:46
  • @ Vlad @ player please see the EDIT portion of the post – ryan Jun 24 '14 at 18:53

0 Answers0