javascript - 如何最好地处理 Ext JS 中的多个相关模板？

Question

我正在尝试制作一个面板来显示我从 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
        }]
    }

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

Answer 1

您可以向所有共享相同数据的组件添加一个属性，以便您可以通过该属性进行查询。

例如:

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 实际上都在同一个 items 数组中，您可能只需要一个包含所有信息的 tpl。