Question

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

我想将TransactionType显示为列表项的Header，我必须遍历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（＆＃39; MyMobile.store.ActionSummaryStore＆＃39;，{ extend：＆＃39; Ext.data.Store＆＃39;，

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存储。它仅显示“事务类型”，“平均值”标题，而不显示嵌套项详细信息。请帮忙。

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

编辑2 我删除了ActionSummaryModel中的hasMany映射，并添加了一个字段{name：＆＃39; ActionList＆＃39;，type：＆＃39; auto＆＃39;然后它正在工作。但我想与 hasMany 和 belongsTo 的关系做到这一点。你的帮助赞赏!!

Answer 1

我将列出使代码正常工作的所有步骤：

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

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

其次，您需要使用associationKey这是数据中属性的名称，以便从name关联中的hasMany而不是hasMany: { model: 'MyMobile.model.ActionModel', associationKey: 'ActionList' }中读取关联：

tpl

最后，在您的视图中，您需要通过更改以下内容对<tpl for="ActionList">进行一些更改：

<tpl for="actionmodels">

以复数关联的型号名称：

{{1}}

顺便说一下，请记住在app.js中包含所有相应的视图，商店和模型，以使其有效。希望它有所帮助：）

Ext XTemplate问题

1 个答案: