Question

my model is:

Ext.define('GS.model.user', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'username',
        type: 'string'
    }, {
        name: 'email',
        type: 'string'
    }]
});

my store code is:

Ext.define('GS.store.userstore', {
    extend: 'Ext.data.Store',
    requires: 'GS.model.user',
    config: {
        model: 'GS.model.user',
        autoLoad: true,
        // data: [],
        proxy: {
            type: 'ajax',
            url: '/app/mydata.json',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    },
    listeners: {
        load: function(store) {
            alert(store.getCount());
            console.log(store.getAt[0]);
        }
    }
});

view code:

Ext.define('GS.view.userlist', {
    extend: 'Ext.form.Panel',
    xtype: 'userpanel',
    requires: ['GS.store.userstore', 'Ext.form.Panel'],

    config: {
        itemTpl: '{store.get("id"),{sotre.get("username")},{store.get("email")}',
        store: 'userstore'
    }
});

Json data:

[{
    "users": [{
        "id": "1001",
        "username": "user1",
        "email": "[e-mail]"
    }, {
        "id": "1002",
        "username": "user2",
        "email": "[e-mail]"
    }, {
        "id": "1003",
        "username": "user3",
        "email": "[e-mail]"
    }, {
        "id": "1004",
        "username": "user4",
        "email": "[e-mail]"
    }]
}]

after running it at google chore i’m getting error:

OPTIONS file:///D:/app/mydata.json?_dc=1334569840508&page=1&start=0&limit=25

Resource failed to load.

please tell me how it’s possible?
how can i retrieve json data value and populate it as a list.
help me.

Answer 1

There are two issues with your code:

1. Your JSON is valid, but it cannot be read by the JSON reader because it is an array. If you remove the [ and ] it will work:

   {
       "users": [
           {
               "id": "1001",
               "username": "user1",
               "email": "[e-mail]"
           },
          ...
       ]
   }
   

2. Inside your reader, you need to use rootProperty – not root:

   reader: {
       type: 'json',
       rootProperty: 'users'
   }
   

3. Within your itemTpl you can access fields directly using {fieldName} – you do not need to use store.get('xxx'):

   itemTpl: '{username}, {email}'
   

As for the file not loading; I’m not sure. Try a different browser and if it still doesn’t work, check again that the file actually exists.