0

我正在尝试创建一个 XTemplate 来显示数据视图中每个项目的一对多关系显示。

我想将 TransactionType 显示为列表项的标题，我必须遍历该 ActionSummary 的 ActionList 并显示每个 Action 项名称。

但是下面的代码失败了。

楷模

行动模型在这里

Ext.define('MyMobile.model.ActionModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Action', type: 'string' },            
        { name: 'Count', type: 'int' },            
        { name: 'Id', type: 'int' },
        { name: 'CurrentStatus', type: 'string' }
    ]
}
});

行动总结模型

Ext.define('MyMobile.model.ActionSummaryModel', {
extend: 'Ext.data.Model',
config: {
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'TransactionType', type: 'string' }

    ]
    ,
    hasMany: {
        model: 'MyMobile.model.ActionModel',
        name: 'ActionList'
    }
}
});

店铺

Ext.define('MyMobile.store.ActionSummaryStore', { 扩展：'Ext.data.Store',

config: {
    model: 'MyMobile.model.ActionSummaryModel',

    proxy: {
        type: 'ajax',
        url: 'home/GetActionSummary',
        method: 'GET',
        reader: {
            type: 'json'
        }
    }
}
});

看法

Ext.define('MyMobile.view.ActionListView', {
extend: 'Ext.dataview.List',
xtype: 'actionsummary',
id: 'actionsummaryList',

config: {
    title: 'Actions',

    store: 'ActionSummaryStore',
    emptyText: 'Loading action items...',
    itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                            '<div><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',       
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
 }
 });

JSON JSON 是来自服务器的摘要数组

[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}]

如果我硬编码这个 JSON 数据而不是存储它正在工作。

Ext.define('WorksMobile.view.ActionListView', {
extend: 'Ext.dataview.List',
xtype: 'actionsummary',
id: 'actionsummaryList',

config: {
    title: 'Actions',


    data:[{"Id":1,"TransactionType":"Transaction 1","ActionList":[{"Id":1,"Count":4,"Action":"Action Item 1","CurrentStatus":"Open"},{"Id":2,"Count":14,"Action":"Action Item 3","CurrentStatus":"Open"},{"Id":3,"Count":44,"Action":"Action Item 5","CurrentStatus":"Close"}]}],

    emptyText: 'Loading action items...',
    itemTpl: Ext.create('Ext.XTemplate', '<tpl for=".">',
                                            '<div><p class="action-text">{TransactionType}</p>',
                                                  '<tpl for="ActionList"><tpl for=".">',  
                                                        '<p>{Action}</p>',  
                                                         '<span class="action-count">Count:{Count}</span><br>',
                                                         '<span class="action-status">Current Status: {CurrentStatus}</span>',
                                                    '</tpl></tpl>',          
                                             '</div>',
                                           '</tpl>'

                       )
}
});

我不知道为什么上面的 XTemplate 不能与 JSON 存储一起使用。它仅显示交易类型、平均标题，而不显示嵌套项目的详细信息。请帮助解决这个问题。

编辑：一段时间后，我意识到商店没有加载关系。它没有在每个 ActionSummary 下显示 ActionList。有映射问题吗？

编辑 2 我删除了 ActionSummaryModel 中的 hasMany 映射并添加了一个字段 { name: 'ActionList', type: 'auto' } 然后它正在工作。但我想通过与hasMany和belongsTo的关系来做到这一点。感谢您的帮助！

4

1 回答 1

0

我将列出使您的代码按以下方式工作的所有步骤：

首先，autoLoad在您的商店中添加以在实例化时自动从远程源加载相关商店

model: 'MyMobile.model.ActionSummaryModel',
autoLoad: true

其次，您需要使用associationKeywhich 是数据中的属性名称来读取关联，而不是name在您的hasMany关联中：

hasMany: {
    model: 'MyMobile.model.ActionModel',
    associationKey: 'ActionList'
}

最后，在您看来，您需要tpl通过更改来进行一些更改：

<tpl for="ActionList">

到相关模型名称的复数形式：

<tpl for="actionmodels">

顺便说一句，请记住在 app.js 中包含所有相应的视图、存储和模型以使其正常工作。希望能帮助到你 ：）

于 2012-10-18T15:23:20.220 回答