Accessing instance of view created with Ext.Define

[matfin]

Looking at the following code

var mainpanel = Ext.define("App.view.Main", {
    extend: 'Ext.tab.Panel',
    xtype: 'mainpanel',
    id: 'mainpanel',
    config: {
    	fullscreen: true,
        tabBarPosition: 'left',
        items: [
            {
                xtype: 'homepanel'
            }, 
           {
            	xtype: 'settingspanel'
            }
        ]
    }
});

How can I access the instance of this created panel ?

[mrsunshine]

With the component query

http://docs.sencha.com/touch/2-0/#!/...ComponentQuery


Ext.ComponentQuery.query('homepanel');

[matfin]

Hi

Thanks for the reply. That does indeed work (somewhat) and it caught me out when trying to access 'homepanel'. Here is how I refined it:

-- Ext.ComponentQuery.query('homepanel'); - this returns an array of all components with the xtype 'homepanel' even if there is only one. Trying to access this directly won't work

-- Ext.ComponentQuery.query('homepanel')[0]; - this will access the actual 'homepanel' component directly, which is exactly what I needed.

Another pitfall that caught me. When the function animateActiveItem() is called in the following way:

this.getMain().animateActiveItem(
{
    xtype: 'homepanel'
},
{
    type: 'fade'
});

It creates another instance of the homepanel, so each time the above function is called (from a controller for example) it clones the homepanel. The correct way to do this would be as follows:

this.getMain().animateActiveItem(Ext.ComponentQuery.query('homepanel')[0], {type: 'fade'});

Hope this helps others who run into this problem in the future.

Thanks again,

Matt