Question

我有一个Blog模型，其中包含hasMany Posts（以及许多其他字段）。现在我想在List - 这样的视图中列出这些帖子：

[我的帖子＃1]
[我的帖子＃2]
[我的帖子＃3]

就所描述的API而言，我能够将商店或数据属性传递给Ext.dataview.List。但是我无法找到如何将hasMany记录传递给列表，因此它将为每个记录显示一个项目。

我真的要创建另一家商店吗？是不是可以将我的数据视图配置为store: 'Blog.posts'或data: 'Blog.posts'甚至records: 'Blog.posts'之类的内容？

Answer 1

扩展dataview.List以定义itemtpl以循环播放帖子

itemTpl: new Ext.XTemplate(
    '<tpl for="**posts**" >',
        '<div>{TheBlogPost}</div>',
            '</tpl>'
)

Answer 2

正如@Adam Marshall所说，这并不像我想象的那么容易。

Answer 3

如果您知道如何访问它们，Sencha会自动生成关联中的商店。因此，您只需在加载后自动生成“substore”的列表存储即可。

这种方法可能存在一些问题，例如当使用listpaging插件时，它很快。

示例：

<强>模型

Ext.define('Conversation', {
extend: 'Ext.data.Model',
config: {
    fields: [

    ],
    associations:
        [
            {
                type: 'hasMany',
                model: "Message",
                name: "messages",
                associationKey: 'messages'
            }
        ]
}
});

Ext.define('Message' ,
{
    extend: "Ext.data.Model",
    config: {
        idProperty: 'id_message',
        fields: [
            { name: 'text', type: 'string' },
            { name: 'date', type: 'string' },
            { name: 'id_message', type: 'int' },
            { name: 'me', type: 'int'} // actually boolean
        ]
    }
}
    );

<强> JSON

 [
{
    "messages": [

    {"id_message": 11761, "date": 1378033041, "me": 1, "text": "iiii"},
    {"id_message": 11762, "date": 1378044866, "me": 1, "text": "hallo"}
]}
]

<强> CONTROLLER

        this.getList().getStore().load(
            {
                callback: function(records, operation, success) {

//IMPORTANT LINE HERE:
getList().setStore(Ext.getStore(me.getList().baseStore).getAt(0).messages());

                },
                scope: this
            }

        );

<强>列表视图

                            {
                                flex: 1,
                                xtype: 'list',
                                itemId: 'ConversationList',
                                data: [],
                                store: 'ConversationStore',
                                baseStore: 'ConversationStore',
                                itemTpl:
                                        '                {[app.util.Helpers.DateFromTimestamp(values.date)]}<br><b>{name}</b>' +
                                        '           {[app.util.Helpers.fixResidualHtml(values.text)]} </div>' +
                            },

从hasMany模型MVC方式生成Ext.dataview.List中的项目

3 个答案: