Ext JS 4 using JSON in proxy reader will not load records

Question

I am trying to use Ext JS 4 and was playing with one of the grid examples and wanted to use JSON rather than XML. No mater how I code the JSON data, I get no records to load.

Here is my code:

Ext.define('Plant', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'common',
        type: 'string'
    }, {
        name: 'botanical',
        type: 'string'
    }, {
        name: 'light'
    }, ]
});

// Create the Data Store.
var store = Ext.create('Ext.data.Store', {
    // Destroy the store if the grid is destroyed.
    autoDestroy: true,
    model: 'Plant',
    proxy: {
        type: 'ajax',
        url: 'plants.json',
        reader: {
            type: 'json',
            root: 'records'
        }
    },
    sorters: [{
        property: 'common',
        direction: 'ASC'
    }]
});

Here is my data:

{
    "records": [
        {
            "common":    "Bloodroot",
            "botanical": "Sanguinaria canadensis",
            "light":     "Mostly Shady"
        }, {
            "common":    "test",
            "botanical": "I do not know",
            "light":     "Mostly Shady"
        }
    ]
}

The XML reader works great, but we want to use JSON.

Thanks in advance

Davor Zubak Davor Zubak · Accepted Answer · 2011-11-11T14:16:59

Have a look at this thread! You need to check your url path to plants.json, path starts from 'index.html' or some other similar starting point , and not the .js file where store is located. I tested your code and it works fine, also use autoLoad:true in your Ext.data.Store, i dont see your grid code so.. Cheers!

Ext JS 4 using JSON in proxy reader will not load records

1 Answers