CODEWITHSUNDEEP
extjssencha-touch
Varun Singh
Varun Singh

Reputation: 1135

How to use itemId in Sencha touch

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.

Upvotes: 1

Views: 3121

Answers (2)

Andrea Casaccia
Andrea Casaccia

Reputation: 4971

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.

Upvotes: 2

hermann
hermann

Reputation: 6295

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.

Upvotes: 2

Related Questions