Question

我是sencha的新手。我使用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'
            }
        ]
    }
});

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

最后是List

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

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

});

我可以看到，商店可以通过点击＆＃34; eye＆＃34;从Sencha Architect的服务器获取数据。商店旁边的图标。

我尝试使用data.AcctId的List tpl或将List store更改为MyJsonPStore.data，但都无效。

请帮助，非常感谢。

p / s：我尝试使用非嵌套模型，List工作正常。这是主要的js文件，如果需要

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。数据结构

不确定定义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'
    }
}

Sencha触摸列表tpl与嵌套数据

1 个答案: