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中最好地处理多个相关模板？

1 个答案: