Sencha Touch 1.1.1 nested JSON Store load - json

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": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"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": "bla#bla.com",
"password": "bla",
}, {
"id": 17,
"username": "bla#bla.com",
"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
]
});
}
});