Question

I am trying to load a JSON data which is replied back by an AJAX request to a grid.
My store definition:

Ext.define('Report.store.CustomerDataStore', {
    extend: 'Ext.data.Store',
    requires: [
        'Report.model.Customer'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: false,
            storeId: 'CustomerDataStore',
            model: 'Report.model.Customer',
            proxy: {
                type: 'ajax',
                url: '',
                reader: {
                    type: 'json',
                    root: 'data',
                    record: 'fields'
                }
            }
        }, cfg)]);
    }
});

There is a button in my app which is defined as follows:

xtype: 'button',
handler: function(button, event) {
    var queryform = this.up('form').getForm();
    var me = this;
    if(queryform.isValid())
    {
        Ext.Ajax.request({
            url: 'customers/',    // where you wanna post
            success: function(response) {
                var mystore = Ext.data.StoreManager.lookup('CustomerDataStore');
                var myData = Ext.JSON.decode(response.responseText);
                console.log(myData.toSource());
                mystore.loadData(myData);
            },
            jsonData: Ext.JSON.encode(queryform.getValues())
        });
    }
},

The problem is that my grid doesn’t show the replied data! I am sure that my replied JSON format is OK. I have checked it with a json file. also myData.toSource() returns my desired JSON format.
I am pretty confused what I am doing wrong?

Could you plz help?

Answer 1

I found the solution, I had to use loadRawData() function instead of loadData().