带有嵌套数据的 Sencha 触摸列表 tpl答案

【问题标题】：Sencha touch list tpl with nested data带有嵌套数据的 Sencha 触摸列表 tpl
【发布时间】：2013-05-07 03:41:47
【问题描述】：

我是煎茶的新手。我通过使用 sencha 架构师创建 MVC 结构，触摸 2.2.x 版本。

我想向列表控件显示嵌套数据，但我不确定如何定义 tmp。

这是从服务器返回的数据示例

{
"data": 
[
    {"AcctId": 1, "AcctNum": "A", "Alias": "aa"},
    {"AcctId": 2, "AcctNum": "B", "Alias": "bb"}, 
    {"AcctId": 3, "AcctNum": "C", "Alias": "cc"}
]
}

这是模型，我定义了嵌套模型

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

这是获取数据的Stores，它将是跨服务器数据，所以我使用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'
            }
        }
    }
});

终于列表

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',

    config: {
        store: 'MyJsonPStore',
        itemTpl: [
            '<div>List Item {AcctId}</div>'
        ]
    }

});

我可以看到商店可以通过点击商店旁边的“眼睛”图标从 Sencha Architect 中的服务器获取数据。

我尝试使用 data.AcctId 列表 tpl 或将列表存储更改为 MyJsonPStore.data 但都不起作用。

请帮忙，非常感谢。

p/s：我尝试使用非嵌套模型，并且列表工作正常。这是主要的js文件，以防万一

Ext.Loader.setConfig({

});

Ext.application({
    models: [
        'Data',
        'LoginAlias'
    ],
    stores: [
        'MyJsonPStore',
        'MyStore'
    ],
    name: 'MyApp',

    launch: function() {

        Ext.create('MyApp.view.MyList', {fullscreen: true});
    }

});

【问题讨论】：

标签： extjs nested sencha-touch-2

【解决方案1】：

1.数据结构

不确定定义MyApp.model.Data 是否有用，因为它只是数据列表的根。所以你可以放弃hasMany 逻辑。

2。数据表示

Ext.dataview.List 旨在仅显示简单列表。对于嵌套列表，请考虑扩展 Ext.dataview.NestedList。（但如果 1. 为真，则不需要它）。

3。数据访问

要直接访问您需要显示的数据，只需将rootProperty: 'data' 添加到您代理的阅读器配置对象：

proxy: {
    type: "jsonp",
    url: 'http://server.ext/path/to/MyApp/app/data/sample.ashx',
    reader: {
        type: "json",
        rootProperty: 'data'
    }
}

【讨论】：