Sencha touch list tpl with nested data

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});
    }

});

Fabrice Boyer Fabrice Boyer · Accepted Answer · 2013-05-07T08:35:10

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'
    }
}

Sencha touch list tpl with nested data

1 Answers