Sencha touch list tpl with nested data - extjs

Question

I'm new to sencha. I'm create MVC structure by use sencha architect, touch 2.2.x version.
I want to show nested data to a list control but I'm not sure how to define the tmp.
Here is sample of data return from server
{
"data":
[
{"AcctId": 1, "AcctNum": "A", "Alias": "aa"},
{"AcctId": 2, "AcctNum": "B", "Alias": "bb"},
{"AcctId": 3, "AcctNum": "C", "Alias": "cc"}
]
}
this is model, I define nested model
Ext.define('MyApp.model.Data', {
extend: 'Ext.data.Model',
uses: [
'MyApp.model.LoginAlias'
],
config: {
hasMany: {
model: 'MyApp.model.LoginAlias',
name: 'LoginAlias'
}
}
});
Ext.define('MyApp.model.LoginAlias', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'AcctId'
},
{
name: 'AcctNum'
},
{
name: 'Alias'
}
]
}
});
This is Stores to get data, It will be cross server data so I use JsonP
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Data'
],
config: {
autoLoad: true,
model: 'MyApp.model.Data',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://localhost:8000/test/get_alias/',
reader: {
type: 'json'
}
}
}
});
Finally the List
Ext.define('MyApp.view.MyList', {
extend: 'Ext.dataview.List',
config: {
store: 'MyJsonPStore',
itemTpl: [
'<div>List Item {AcctId}</div>'
]
}
});
I can see that the Store can get data from server in Sencha Architect by click on the "eye" icon next to the Store.
I try the List tpl with data.AcctId or change List store to MyJsonPStore.data but all not work.
Please help, thanks very much.
p/s: I try with non-nested model, and the List work ok. And this is the main js file, In case it needed
Ext.Loader.setConfig({
});
Ext.application({
models: [
'Data',
'LoginAlias'
],
stores: [
'MyJsonPStore',
'MyStore'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.MyList', {fullscreen: true});
}
});

Answer 1

1. Data structure
Not sure it's useful to define MyApp.model.Data as it's only the root of your list of data. So you could give away the hasMany logic.
2. Data representation
Ext.dataview.List is designed to show simple lists only. For nested lists, consider extending Ext.dataview.NestedList. (but if 1. is true, you won't need it).
3. Data access
To get direct access to the data you need to display, simply add rootProperty: 'data' to your proxy's reader config object:
proxy: {
type: "jsonp",
url: 'http://server.ext/path/to/MyApp/app/data/sample.ashx',
reader: {
type: "json",
rootProperty: 'data'
}
}