Using Id and itemId in Extjs to access components

Question

In ExtJs Best practices I gone through not to use Id for accessing Ext Components rather use ItemId, I am very new in accessing components using ItemID, does any one can help me in default syntax or the way to access components.

Also on click of yes in a message box I need to disable some components in masked page, whether this can be achieved with the help of ItemID? Please explain.

I feel when using ItemiD it may return array of elements/components, so if need to get an exact component I need to iterate again. I have this ques too....

Velma

Answer 1

Basic difference between id and itemId is

When you use an id for a component, there must be a single instance of this component, If you create another instance that has the same id, you will have problems as the DOM is confused.

when you use itemId, it should be unique only within the component's immediate container.the component's container maintains a list of children ids.

so the best practice is to use itemId instead of id

now How to access?

if you use id

Ext.getCmp('id')

or

document.getElementById('id')

or

Ext.ComponentQuery.query("#id")[0]

if you use itemId

parentContainer.getComponent('child_itemId'),

refer following example

e.g

 var parentContainer= Ext.create('Ext.panel.Panel', {
         initComponent: function(){
            Ext.applyIf(me, {
               //childrens
               items: [{
                          xtype:'textfield',
                          itemId:'text'
                       },
                       {
                           xtype:'panel',
                           itemId:'childpanel',
                           items:[
                                 {
                                     xtype:'combobox',
                                     itemId:'combo'
                                 }
                           ]
                       }]
            });
            this.callParent(arguments);
        },
        renderTo:Ext.getBody()

    })

in above example

for accessing textfield use

parentContainer.getComponent('text');

for accessing combobox use

parentContainer.getComponent('childpanel').getComponent('combo');

or

Ext.ComponentQuery.query("#combo")[0];

this will return array of item with id combo in page for these you should use unique itemId so you will get the first item you are searching for

or

parentContainer.queryById('combo');

you can also use Ext.util.MixedCollection

        var fields = new Ext.util.MixedCollection();
        fields.addAll(parentContianer.query('[isFormField]'));
        var Combo = fields.get('combo');

Dreiser

Answer 2

Lets suppose you define Panel like below which have a button. Now to access this button you can use Extjs ComponentQuery api. To uniquely identify my button I can use Ext.ComponentQuery.query('myPanel button[itemId=myButton]')[0]. For more details check http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery

Ext.define('app.view.panel.MyPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myPanel',
    height: 360,
    width: 480,
    layout:'fit',
    title: 'My Panel',
    initComponent: function(){
        var me =this;
        me.items=[{
            xtype:'button',
            itemId: 'myButton'
            ... 
        }]
        this.callParent(arguments);

    }
})

Screens

Answer 3

You can search and access components by using the Ext.Component.query and passing along the itemId, refer to following links:-

http://training.figleaf.com/tutorials/senchacomplete/chapter2/lesson5/2.cfm http://devjs.eu/en/how-to-use-ext-component-query-in-ext-js-4/

Lepsy