如何最好地处理 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

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

例如：

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

然后您可以 query 通过那个 attribute 并遍历结果一次修改所有数据：

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

另一个选项：

如果 tpl 实际上都在同一个 items 数组中，您可能只用一个 tpl 包含所有信息。

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

How to best handle multiple related templates in Ext JS?

javascript

extjs

extjs4

extjs4.2