extjs 4 XTemplate类关联

我正在测试ExtJS4，我偶然发现了一些东西，我似乎无法理解

我有简单的对象关联：Snapshot-hasMany->Model

现在，我尝试使用XTemplate在视图组件中显示此关联，因此我的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>'
);

由于ExtJS4引入了模型的概念，我已经为快照和模型创建了模型，并根据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'
});

模型；P

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

这就是我的问题所在-当我使用这个设置时，在执行XTemplate时，没有显示任何模型，但是如果我从快照模型中删除关联，只添加另一个名为“模型”的字段，它就可以正常工作

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

好问题（+1）

现在看来，直接在XTemplate中使用关联是不可能的，因为XTemplate需要一个对象数组。（当您有关联时，这不再正确）

你有三个选择-

摆脱像你这样的联想 提到。（听起来不太好 （但会起作用）

如果有使用样板的数据视图，请替代并从模型创建对象阵列

在调用apply之前，迭代snapshotStore.getRange（）并（重新）生成具有“models”属性的对象，并将此数组传递给

。apply

---

您可以监听store.load事件并将相关数据添加回store记录，然后模板就会工作（我使用RowExpander的rowBodyTpl完成了这项工作）

侦听器：{
加载：功能（存储、存储记录）{
varⅠ，r；
对于（i=0；i，根据我最近的经验，如果你不在商店工作，你应该不会有问题。
ExtJS 4文档中的XTemplate示例工作正常（至少对我来说是这样）。您可以为这些数据添加一个模型，该示例将继续工作

我尝试通过存储区执行同样的操作。当您将store.first（）数据传递给overwrite（…）XTemplate方法时，关联不在该结构中。
您可以签入以下代码：

var data = {
    name : 'Tommy Maintz',
    title : 'Lead Developer',
    company : 'Sencha Inc.',
    email : 'tommy@sencha.com',
    address : '5 Cups Drive',
    city : 'Palo Alto',
    state : 'CA',
    zip : '44102',
    drinks : ['Coffee', 'Soda', 'Water'],
    kids : [{
                name : 'Joshua',
                age : 3
            }, {
                name : 'Matthew',
                age : 2
            }, {
                name : 'Solomon',
                age : 0
            }]
};



var kidsModelProps = {
    extend: "Ext.data.Model",
    fields: [
        "name",
        {name: "age", type: "int"}
    ]
}
Ext.define ("KidsModel", kidsModelProps)

var datamodelProps = {
    extend: "Ext.data.Model",
    fields: [
        "name", "title", "company", "email", "address",
        "city", "state", "zip", "drinks"
    ],

    hasMany: {name: "thekids", model: "KidsModel"},

    proxy: {
        type: "memory",
        reader: {
            type: "json"
        }
    }
}
Ext.define ("DataModel", datamodelProps)


var kidsStore = new Ext.data.Store({
    data: data,
    storeId: "kidsStore",
    model: "DataModel"

})

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Title: {title}</p>',
    '<p>Company: {company}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',     // interrogate the kids property within the data
        '<p>{name}</p>',
    '</tpl></p>'
);

Ext.onReady(function () {
    var thePanel = Ext.create ("Ext.panel.Panel", {
        html: "<b>Viewport tpl-test: build with separated files</b>",
        border: 10,
        height: 500,
        layout: {
            type: 'vbox',
            align: 'center'
        },
        renderTo: Ext.getBody(),
        bodyStyle: "background-color: yellow",

        items: []

    })
    var someData = kidsStore.first().data
    tpl.overwrite (thePanel.body, someData)
}

var数据={
姓名：“汤米·梅因茨”，
标题：“首席开发人员”，
公司名称：“森查公司”，
电邮:'tommy@sencha.com',
地址：“5杯路”，
城市：“帕洛阿尔托”，
声明：“CA”，
zip:'44102'，
饮料：[“咖啡”、“苏打水”、“水”]，
孩子们：[{
姓名：'约书亚'，
年龄:3
}, {
名字：'马修'，
年龄:2
}, {
姓名：'所罗门'，
年龄:0
}]
};
变量kidsModelProps={
扩展：“Ext.data.Model”，
字段：[
“姓名”，
{名称：“年龄”，类型：“int”}
]
}
Ext.define（“KidsModel”，kidsModelProps）
var datamodelProps={
扩展：“Ext.data.Model”，
字段：[
“姓名”、“职务”、“公司”、“电子邮件”、“地址”，
“城市”、“州”、“拉链”、“饮料”
],
有很多：{name:“thekids”，model:“KidsModel”}，
代理：{
键入：“内存”，
读者：{
类型：“json”
}
}
}
Ext.define（“数据模型”，datamodelProps）
var kidsStore=新的Ext.data.Store({
数据：数据，
storeId:“kidsStore”，
模型：“数据模型”
})
var tpl=new Ext.XTemplate(
“名称：{Name}
”，
“标题：{Title}
”，
“公司：{Company}
”，
“孩子：”，
''，//查询数据中的kids属性
“{name}
”，
“
”
);
Ext.onReady（函数（）{
var thePanel=Ext.create（“Ext.panel.panel”{
html：“视口tpl测试：使用分离文件构建”，
边界：10，
身高：500，
布局：{
键入：“vbox”，
对齐：“居中”
},
renderTo:Ext.getBody（），
车身风格：“背景色：黄色”，
项目：[]
})
var someData=kidsStore.first（）.data
tpl.overwrite（panel.body，someData）
}

您还可以尝试（看看XTemplate存储关联的工作情况有多糟糕）在

抱歉，没有提供解决方案：(

我应该指出，从4.1开始，模型记录有一个名为
getData（）
的方法，如果使用
getData（true）调用该方法
还将返回关联的数据。
我完全同意让模板看起来像这样是很理想的。但是，实际上，很容易获得一个模板来处理关联。模型将其所有字段保存在一个名为data的属性中，并在根级别使用以下约定进行关联：associationName+'Sto因此，您需要做的就是按如下方式编写模板：

var template = Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="snapshot" id="{data.id}">',
            '<h1>{data.snapshot}</h1>',
            '<p><span class="label">Created: </span>{data.created}</p>',
            '<p><span class="label">Models</span></p>',
            '<tpl for="modelsStore">',
                '<p>{data.name}  - {data.description}</p>',
            '</tpl>',
        '</div>',
    '</tpl>',
    '<div class="x-clear bottompad"></div>'
);

var template=Ext.create（'Ext.XTemplate'，
'',
'',
“{data.snapshot}”，
“创建：{data.Created}
”，
“型号
”，
'',
“{data.name}-{data.description}
”，
'',
'',
'',
''
);
像@Izhaki说的那样，使用记录上的getData（true）将数据传递给模板，然后执行@Aaron所说的变化以循环数据。例如，如果模板是容器的一部分：

 //...
 tpl: //your tpl
 data: record.getData(true)
 //....

此模板片段应该可以正常工作：

 '<tpl for="models">',
 '<p>{name}  - {description}</p>',
 '</tpl>'

”，
“{name}-{description}
”，
''
这是一种自作主张，我很喜欢sencha中的ORM概念，大多数语言现在都有某种ORM，我可以看到这一功能是MVC概念的一个坚实的组成部分，但我真诚地希望这一功能能够正常工作。也许下一个版本会带来这一功能。现在我想我会坚持使用models概念没有关联，因为对于我的项目来说，这将是最不痛苦的过渡模型。我同意。总体而言，ExtJS4中有很多好东西，但它在质量方面失败得很惨。（甚至文档都是inc
 //...
 tpl: //your tpl
 data: record.getData(true)
 //....

 '<tpl for="models">',
 '<p>{name}  - {description}</p>',
 '</tpl>'