Grabbing a Extjs component

Question

Please help understanding why the commented code below does not work on ExtJs 3.4:

var mywin=new Ext.Window({
        width : 200,
        height: 150,
        title : 'Accordion',
        layout: 'accordion',
        border: false,
        items: [
            panel1,
            panel2
        ]
    }).show();

    <!--Ext.getCmp('mywin').add({ - THIS DOES NOT WORK ,while below works-->

    mywin.add({
        title: 'Appended panel',
        id: 'addedPanel',
        html : 'Add Me!'
    });
    mywin.doLayout();

Answer 1

mywin is a reference to a window object that you created. This is just a normal JS construct using variable assignment.

Ext.getCmp('mywin') attempts to look up a component that has an id property of mywin. It's typically a good idea to avoid using Ext.getCmp unless you'll only ever be creating once instance of the component, since it must be globally unique.

Answer 2

Ext.getCmp('x') works only if x is id of some component(Panel or window whatever you want to use). Just provide an id field(id:'component_Id') and use Ext.getCmp on the id of component. In many scenarios you can also use lookupReference, please check extjs docs for it.

Answer 3

You can try using the following for getting the reference to your window (although you already have it in your mywin variable):

var winInstance = Ext.ComponentQuery.query('mywin')[0];
   winInstance.add({
        title: 'Appended panel',
        id: 'addedPanel',
        html : 'Add Me!'
    });

But the problem was you were trying to reference your window component using the name of the variable, so like it's mentioned in previous answers, you would need to use an itemId: 'mywin' or id: 'mywin', since as it stands there is really no component with an itemId or id with that name.