How to best handle multiple related templates in Ext JS?

I am trying to make a panel to display some data I get from an API. I have decided that XTemplates are probably the best way of handling this. However, I would like the panel to be well organized and flexible like other ext.js elements. So what I came up with is multiple templates in one panel that all run off of the same data. Here is an example of what I am thinking:

{
        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
        }]
    }

So my question is, what is the best way of updating all the templates in a panel when I get new data, or is there a better way of handling this whole problem than the way I am attempting it?

Solution

You could add an attribute to the components that all share the same data so that you can query by that attribute.

For instance:

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

And then you can query by that attribute and iterate through the results modifying there data all at once:

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

Another Option:

If the tpl's are actually all in the same items array you could potentially make just one tpl with all the info.