extjs 4 XTemplate类关联

Gre*_*reg 11 model extjs model-associations extjs4

我正在测试extjs 4,我偶然发现了一些东西,我似乎无法弄明白.

我有简单的对象关联:快照 - hasMany - >模型

现在,我正在尝试使用XTemplate在View组件中显示这种关联,所以我的XTemplate看起来像这样:

Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="snapshot" id="{id}">',
'<h1>{snapshot}</h1>',
'<p><span class="label">Created: </span>{dateString}</p>',
'<p><span class="label">Models</span></p>',
'<tpl for="models">',
'<p>{name}  - {description}</p>',
'</tpl>',
'</div>',
'</tpl>',
'<div class="x-clear bottompad"></div>'
);
Run Code Online (Sandbox Code Playgroud)

我的JSON响应看起来像这样(只显示'快照'节点):

    {
        "id": 1,
        "snapshot": "Snapshot 1",
        "created": 1305806847000,
        "models": [
            {
                "id": 1,
                "name": "ABC",
                "description": "A B C"
            }, {

                "id": 111,
                "name": "ABCDD",
                "description": "A B C XCXC"
            }
        ]
    }
Run Code Online (Sandbox Code Playgroud)

由于extjs 4引入了Model I的概念,我已经为Snapshot和Model创建了模型,并根据API文档创建了关联.

快照模型:

Ext.define('Snapshot', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        'snapshot',
        {name: 'created',type: 'date', dateFormat: 'time' }

    ],
    associations:[
      {type: 'hasMany', model: 'Model', name: 'models'}  
    ],
    idProperty: 'id'
});
Run Code Online (Sandbox Code Playgroud)

模型模型; P.

Ext.define('Model', {
    extend: 'Ext.data.Model',
    belongsTo: 'Snapshot',
    fields: [
        { name: 'id',  type: 'int' },
        { name: 'snapshot_id', type: 'int' },            
        'name',
        'description'
    ],
    idProperty: 'id'
});
Run Code Online (Sandbox Code Playgroud)

这就是我的问题所在 - 当我使用这个设置时,我的模型在执行XTemplate时都没有显示,但是如果我从快照模型中删除关联并只添加另一个名为'models'的字段,它就可以了.

使用关联时,正确显示模型列表的最佳做法是什么?我是否必须使用嵌套模板和自定义函数来执行此操作?

Amo*_*are 7

好问题(+1)

似乎直接在XTemplate中使用关联是不可能的(今天)因为XTemplate需要对象数组.(如果你有关联,这不再是真的)

你有三个选择 -

  1. 摆脱你提到的协会.(听起来不好'但会起作用)
  2. 如果您有使用模板的数据视图,请覆盖Ext.view.AbstractView.prepareData并从模型中创建对象数组
  3. 在调用apply之前,迭代snapshotStore.getRange()并(重新)生成具有"models"属性的对象并将此数组传递给 .apply