ExtJS4 - Reconfiguring a grid in ASP.NET - JSON structure issue

Question

One of ASP.NET's security features is proving to be a mountain to scale here - the "d" property addition when returning a JSON response appears to be confusing ExtJS when I attempt to reconfigure a gridpanel dynamically, causing it to fail when attempting to generate new column structure.

I followed this solution by nicholasnet: http://www.sencha.com/forum/showthread.php?179861-Dynamic-grid-columns-store-fields

and it works beautifully, until the JSON payload is wrapped around the "d" property, e.g.

{"d":{
    "metaData": {
        "root": "data",
        "fields": [{
            "type": "int",
            "name": "id",
            "hidden": true,
            "header": "id",
            "groupable": false,
            "dataIndex": "id"
        }, ...omitted for brevity...]
    },
    "success": true,
    "data": [{
        "id": "1",
        "controller": "Permissions",
        "description": "Allow to see permission by roles",
        "administrator": true,
        "marketing": false
    }]
  }  
}

I can't work out how to tell ExtJS to skirt around this problem. I've tried setting the "root" property of the AJAX reader to "d.data" but that results in the grid showing the correct number of rows but no data at all.

I've all the property descriptors required for column metadata ("name", "header", "dataIndex") in the JSON so I don't believe the JSON structure to be the cause. My main lead at the moment is that on the event handler:

    store.on
({
    'load' :
    {
         fn: function(store, records, success, operation, eOpts)
        {
            grid.reconfigure(store,store.proxy.reader.fields);
        },
        scope: this
   }
},  this);

The fields in historyStore.proxy.reader.fields part is undefined when I pass the "d"-wrapped JSON. Anyone have any ideas on why this is or how to solve this issue?

edit: my Store/proxy

Ext.define('pr.store.Store-History', {
    extend: 'Ext.data.Store',
    model: 'pr.model.Model-History',
    proxy: {

        type: 'ajax',
        url: '/data/history.json',
        reader: {
            type: 'json',
            root: 'd'
        }
}
});

can you try reader as reader: { type: 'json', root: 'd.data', successProperty: 'd.success' } — Özgür Kara
No dice. I'm not entirely sure what the successProperty is supposed to do either, it's really not well documented. — MHTri

Saket Patel Saket Patel · Accepted Answer · 2012-03-20T16:55:35

Ext.define('pr.store.Store-History', {
    extend: 'Ext.data.Store',
    model: 'pr.model.Model-History',
    proxy: {

        type: 'ajax',
        url: '/data/history.json',
        reader: {
            type: 'json',
            root: 'data',
            readRecords: function(data) {
                //this has to be before the call to super because we use the meta data in the superclass readRecords
               var rootNode = this.getRoot(data);
               if (rootNode.metaData) {
                   this.onMetaChange(rootNode.metaData);   // data used to update fields
               }

              /**
               * @deprecated will be removed in Ext JS 5.0. This is just a copy of this.rawData - use that instead
               * @property {Object} jsonData
               */
              this.jsonData = rootNode;
              return this.callParent([rootNode]);    // data used to get root element and then get data from it
          },
        }
    }
});

Update: you are not getting fields in reader because the default code for getting fields from data doesn't handle your wrapped data, so you need to change 'readRecords' function to handle your custom data

ExtJS4 - Reconfiguring a grid in ASP.NET - JSON structure issue

1 Answers