Extjs 4: what is the proper way to retrieve components?

Question

Possible Duplicate:
Extjs4.1, up() down() versus Ext.getCmp()

I worked a lot with ExtJS (always with version 4) but I still have problems to understand what is the proper way to retrieve components.

There are many ways to do it, both global:

• Ext.getCmp ()
• Ext.ComponentQuery.query ()

and internal:

• Ext.container.AbstractContainer.down ()
• Ext.container.AbstractContainer.up ()
• Ext.container.AbstractContainer.nextSibling ()
• Ext.container.AbstractContainer.nextNode ()
• Ext.container.AbstractContainer.previousSibling ()
• Ext.container.AbstractContainer.previousNode ()
• Ext.container.AbstractContainer.child ()
• Ext.container.AbstractContainer.findParent ()
• Ext.container.AbstractContainer.findParentBy ()
• Ext.container.AbstractContainer.query ()
• Ext.container.AbstractContainer.queryBy ()
• Ext.container.AbstractContainer.queryById ()

Now, if I use an id for every component (like buttons, checkboxes, grids, etc) I'm sure to get them always, even if the layout of main containers change: I can do it following the global way. However, this kind of search could affect the performance of the application: honestly, I don't know how Ext.getCmp () works but I think that the search is done in the whole variables namespace.

So, this problem led me to follow occasionally the second way. The problems come when I change the layout of main containers. Take the example as follows:

Ext.create ('Ext.panel.Panel', {
    title: 'Main Container' ,
    width: 300 ,
    renderTo: Ext.getBody () ,
    items: [{
        xtype: 'textfield' ,
        fieldLabel: 'First name'
    } , {
        xtype: 'textfield' ,
        id: 'tfLastName' ,
        fieldLabel: 'Last name'
    } , {
        xtype: 'checkbox' ,
        boxLabel: 'Alive'
    }] ,

    bbar: {
        xtype: 'toolbar' ,
        items: [{
            xtype: 'button' ,
            text: 'Get CheckBox' ,
            // Gets the checkbox starting from the second textfield (Last Name)
            handler: function (btn) {
                var tfLastName = Ext.getCmp ('tfLastName');
                console.log (tfLastName.nextSibling ('checkbox'));
            }
        }]
    }
});

When I click Get Checkbox button it returns the checkbox I requested but If I change the order of Main Container items (suppose to put the checkbox declaration before Last Name textfield) it returns null, as expected. Now, this is the problem: I don't want to change the logic when I'm changing the view.

So, my questions are:

• Does exist a function that allows me to retrieve components without the use of Ids and to leave unchanged the logic while the view is changing?
• Does exist a proper way to do the retrieval of components? If yes, what?