Question

Hi guys I hope someone can help me with this I´m really stuck although it´s some damned beginner question that has already been answered and I assure you I read all of the answer Posts but still can´t get it to work.

I´m using Sencha Touch 1.1.1 and try to get this Store loaded with nested JSON data. Here´s the code:

    Ext.regModel("UserData", {

        hasMany : [{
            name : "id",
            type : "integer",
        },{
            name : "username",
            type : "string",
        },{
            name : "password",
            type : "string",
        }]

    });

    var userdata = 
        {"users": [
                  {
                      "id": 16,
                      "username": "[e-mail]",
                      "password": "bla",
                  }, {
                      "id": 17,
                      "username": "[e-mail]",
                      "password": "bla",
                  }
                 ]
        };


    var myStore = new Ext.data.Store({

        model : 'UserData',
        data : userdata,
        proxy : {
            type : 'ajax',             

            reader : {
                type : 'json',
                root : 'users'      // not working          
            }
        }

    });

    var myList = new Ext.List ({

        fullscreen : true,
        store : myStore,
        grouped : false,
        itemTpl : '<div>{username}</div>'

    });

Returns Uncaught Type Error: Arguments list has wrong type. When I rewrite the JSON with an outer Array wrapper, it works, but with wrong root (not users) I definitly saw examples where this worked with the root:” value.

var userdata = 
    [ {"users": [
              {
                  "id": 16,
                  "username": "[e-mail]",
                  "password": "bla",
              }, {
                  "id": 17,
                  "username": "[e-mail]",
                  "password": "bla",
              }
             ]
    } ];

What am I missing?

Answer 1

If I am not mistaken, in your “UserData” model, it should be fields instead of hasMany.

And try putting your json data in a separate json file and locate the path in your store’s proxy.

var myStore = new Ext.data.Store({
model: 'UserData',
autoLoad: true,
proxy: {
    type: 'ajax',
    url: 'test.json',
    reader: {
        type: 'json',
        root: 'users'
    }
}
});

I tested it and it’s working fine here. Here is my full code.

    Ext.regModel("UserData", {

    fields: [
            {name: 'id', type:'int'},
            {name: 'username', type:'string'},
            {name: 'password', type:'string'}

    ]
});


var myStore = new Ext.data.Store({
    model: 'UserData',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'test.json',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});


var app = new Ext.Application({
    name: 'TestApp',
    useLoadMask: true,
    launch: function() {


        TestApp.views.listToolbar = new Ext.Toolbar({
            title: 'Foo Bar',
            layout: 'hbox'
        });

        TestApp.views.list = new Ext.List({
            id: 'list',
            store: myStore,
            emptyText: 'Nothing',
            itemTpl: '<div class="username">{username}</div>',
        });

        TestApp.views.container = new Ext.Panel({
            layout: 'fit',
            html: 'this is the container',
            dockedItems: [TestApp.views.listToolbar],
            items: [TestApp.views.list]
        });

        TestApp.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [
                TestApp.views.container
            ]
        });
    }
});