How to use itemId in Sencha touch - extjs

Question

I have a view defined as following:
Ext.define('senchaTest.view.ModelDetailsView', {
extend: 'Ext.Panel',
requires: [
],
xtype: 'modeldetailsview',
config: {
modelName: null
layout: 'vbox',
items: [
{
xtype: 'label',
itemId: 'modelinformationview-name-label'
}]
},
updateModelName: function(modelName) {
var components = Ext.ComponentQuery.query('.modelinformationview #modelinformationview-name-label');
if (components && components.length > 0) {
components[0].setHtml(modelName);
};
}
});
I want to reuse this view in a tab panel. I have two tabs in tab panel. Each will have an instance of the above defined view. However, each will have different data and role.
When I try to set the config values of instances of these views, only one config is used. I understand that this happens because Ext.ComponentQuery queries the same component (For example, '.modelinformationview #modelinformationview-name-label'). It returns two components from each instance of the created views, I pick the first one and use that. Hence only one view is used always.
I want to know how to reuse defined views like this. I have some idea that Controllers can play a role in achieving this. But I haven't yet figured the best way to do it. Please help.
Thanks.

Answer 1

this is an instance of the right modeldetailsview in the updateModelName() function, hence it is as simple as:
updateModelName: function(modelName) {
var component = this.down('[itemId=modelinformationview-name-label]');
component.setHtml(modelName);
}
[EDIT]
I made this example to show you how to reuse components identifying them by itemId: https://fiddle.sencha.com/#fiddle/45o.
I defined the Fiddle.view.Main with two instances of Fiddle.view.Reusable, then in the initialize event of the Main view I get a reference to Main view, and from it I use Ext.Container.getComponent() to get the instances of the components by itemId.
itemId is just a way of identifying an instance of a component without polluting the global id space, and you can use it both to get an item in a container with Ext.Container.getComponent('foo'); like I did in my example, or more generally with componentQuery('[itemId=foo]'); like I did to answer your question.

Answer 2

A simple example :
Ext.define('App.view.Mygrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
itemId: 'myGrid',
}
Then later you can add this by adding it to the items property of a parent like this :
items:
[{ xtype: 'myGrid' }]
Note that you don't need the itemId in this case. The alias property makes it so that you can instantiate views using the alias as an xtype.