问题与Ext XTemplate

Question

我想创建一个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.ActionSu mmaryStore”，{ 延伸： '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映射和添加了字段{名称：“的ActionList”，类型：“自动”}然后它工作。但我想这样做与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">  

对了，记得要包括所有您的相应视图，商店和模型在您的app.js使其工作。希望它有助于:)