CODEWITHSUNDEEP
javascriptextjs
Rohit
Rohit

Reputation: 363

Loading data into grid from Form Panel response

I have a form with an associated grid catering to one to many relationship. When I load the form using url then I also get the grid data using the following code

this.load({
        url:reportURL + 'editReport',
        waitMsg:'Loading...',
        params:{
            reportIdKey: this.reportId
        },
        success:function(form,action){                
            response = action.result.data; // Contains the data for the grid               
        }
    })

The returned json is as follows

{
"data":{
  "setupDt":"09-27-2011",
  "expireDt":"12-31-1950",
  "reportNm":"Report_55283",
  "templateNm":"risk_measures_tmpl",
  "GridData":
  *[
     {
        "sId":1,
        "sNm":"W",
        "mId":1,
        "mNm":"R",
        "pId":"..",
        "pIdAlias":"",
        "bId":"...",
        "bIdAlias":"",
        "pDesc":"FUND==GB|ACT==WG|W",
        "grpId":"",
        "scF":"",
        "sortSeq":1,
        "grpN":1
     }
  ]*

how can I load the grid data from the above json into my grid.

Please help.. }, "success":"true" }

Upvotes: 0

Views: 828

Answers (2)

Rohit
Rohit

Reputation: 363

I have worked around by iterating over the result json and setting the corresponding property in the store.getRecordType({field:value}).

Upvotes: 0

Ryan
Ryan

Reputation: 1557

ExtJS grids use a store to update the grid. The store is in fact required. You can just use a json store. When you get call loadData against the store when you get the response. The reason you would use loadData instead of load, is because the form has already done the AJAX call, and load would try to make it again. For example (this all assumes ExtJS 3.4, I don't know what version you are using, but it's pretty much the same thing in ExtJS 4):

    var gridStore = new Ext.data.JsonStore({
        root: 'GridData',
        fields: [
            'sid',
            // ... your other field names under 'GridData'
        ]
    });
    var myGrid = new Ext.grid.GridPanel({
        store: gridStore,
        // ... your other config options here
    });
    this.load({
        url:reportURL + 'editReport',
        waitMsg:'Loading...',
        params:{
            reportIdKey: this.reportId
        },
        success:function(form,action){                
            response = action.result.data; // Contains the data for the grid
            gridStore.loadData(response);
        }
    });

Once loadData completes, the grid will automatically update itself as part of the normal load event handlers that are attached to the store by the grid when you construct the grid.

Upvotes: 1

Related Questions