Javascript 如何在ExtJS中最好地处理多个相关模板？

我试图制作一个面板来显示从API获取的一些数据。我认为XTemplates可能是处理这个问题的最佳方式。但是，我希望面板像其他ext.js元素一样组织良好、灵活。所以我想到的是在一个面板中有多个模板，它们都使用相同的数据。以下是我所想的一个例子：

{
        title: 'Hello',
        layout: 'hbox',
        data: {
            data1: "test",
            data2: "42",
            data3: "fish"
        },
        items: [{
            tpl: "<div>This is some data, {data1}</div>",
            xtype: "panel",
            flex: 1
        }, {
            tpl: "<div>This is more data: {data2}, plus it has a friend {data3}</div>",
            xtype: "panel",
            flex: 2
        }]
    }

{
标题：“你好”，
布局：“hbox”，
数据：{
数据1：“测试”，
数据2：“42”，
数据3：“鱼”
},
项目：[{
tpl：“这是一些数据，{data1}”，
xtype:“面板”，
弹性：1
}, {
tpl：“这是更多的数据：{data2}，加上它有一个朋友{data3}”，
xtype:“面板”，
弹性：2
}]
}

---

所以我的问题是，当我获得新数据时，更新面板中所有模板的最佳方式是什么，或者有没有比我尝试的方式更好的方式来处理整个问题？

您可以向共享相同数据的组件添加一个

属性

，以便您可以通过该属性进行查询

例如：

items:[{
   xtype:'panel',
   tpl: 'template1',
   custom: 'sharedData'
},{
   xtype:'panel',
   tpl: 'template1',
   custom: 'sharedData'
}]

然后，您可以通过该

属性
查询
，并遍历结果，一次修改所有数据：

Ext.ComponentQuery.query('[custom="sharedData"]').forEach(function(comp){
    //manipute the component's data
});



另一种选择：

如果tpl实际上都在同一个
项目中
数组中，您可能只需要制作一个
tpl
，其中包含所有信息。
如果我制作一个tpl，那么，我无法轻松完成hbox，在子系统上使用不同的flex值，可以吗？@skycon我认为您可以将sencha为hbox添加的类添加到div中，但是，是的，这可能会很复杂。我认为我可能最终会使用您的第一个解决方案，它将更易于维护。