Question

I’m having problem loading data from JSON store to EXT grid. Following is the code:

var store = new Ext.data.JsonStore({
        root: 'rates',
        autoLoad=true,
        fields: ['mainid','Country'],
        proxy : new Ext.data.HttpProxy({
                 method: 'GET',
                 url: '/projectLink/gridData.php'
            })
    });

    var grid = Ext.create('Ext.grid.Panel',{
                    renderTo: 'grid-rates',
                    width:700,
                    height:500,
                    title:"Country",
                    store:store,
                    columns:[
                                {id: 'mainid', header: "mainid", width: 200, sortable: true, dataIndex: 'mainid'},
                                {id: 'Country', header: "Country", width: 200, sortable: true, dataIndex: 'Country'}
                             ]

                });

The JSON store is getting filled as it sends request to server and data is sent back but the grid is never populated 🙁 What’s missing?

Following the JSON that I’m using:

{"count":"18239",
"rates":[
{"mainid":"75966","Country":"Afghanistan Cellular-AT"},
{"mainid":"75967","Country":"Afghanistan Cellular-AWCC"},
{"mainid":"75968","Country":"Afghanistan Cellular-Areeba"},
{"mainid":"75969","Country":"Afghanistan Cellular-Etisalat"},
{"mainid":"75970","Country":"Afghanistan Cellular-Others"},
{"mainid":"75971","Country":"Afghanistan Cellular-Roshan"},
{"mainid":"75972","Country":"Albania"},
{"mainid":"75973","Country":"Albania Cellular-AMC"},
{"mainid":"75974","Country":"Albania Cellular-Eagle"},
{"mainid":"75975","Country":"Albania Cellular-Plus"}
]}

Please help!

Answer 1

use Ext.data.Store instead JsonStore, tested in 4.0.2a
also i can’t find JsonStore at the docs

try this:

var store = new Ext.data.Store({ 
    fields:['mainid','Country'],
    proxy: {
        type: 'ajax',
        url : '/projectLink/gridData.php',
        reader: {
            type: 'json',
            root: 'rates',
            totalProperty : "count"
        }
    },
    autoLoad : true
});