Very simple problem about Ext.getCmp()

[darkwingbt]

Hi,
I am a new-comer of Sencha Architect. I have coded a project using Notepad++ with Ext js. It works well. But then, I port that project to Sencha Architect and I am stuck with a very simple problem, Ext.getCmd().
In this demo. I have only 1 button and 1 text field. When I click button, text field's text will change. But in Sencha Architect, I have this:

Ext.define('MyApp.view.MyContainer', {    extend: 'Ext.container.Container',


    height: 282,
    width: 436,


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'button',
                    text: 'MyButton',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'textfield',
                    itemId: 'MyTextField',
                    value: 'DarkWing',
                    fieldLabel: 'Label'
                }
            ]
        });


        me.callParent(arguments);
    },


    onButtonClick: function(button, e, options) {
        alert(Ext.getCmp("MyTextField"));
    }


});

Normally, it will alert [Object], but in this case. It just alerts Undefined.
I wonder what's wrong?

[filippo.ferrari]

Ext.getCmp() <- get id of component if known; not recommended; use query and itemId

[aconran]

Change itemId to id.

Ext.getCmp retrieves from the global ComponentManager. When you use an id, it will be registered with the global ComponentManager (note this means that you can only use an id once).

For this reason, it is generally not recommended. If you want to use item id you could change Ext.getCmp to this.down('#MyTextField').

By using itemId's you can create multiple instances of this object. itemId must be unique per container.

[nishant.chandwani]

first give a id in Textfield
{
xtype: 'textfield',
itemId: 'MyTextField',
id:'text_id',
value: 'DarkWing',
fieldLabel: 'Label
}
onButtonClick: function(button, e, options) {
alert(Ext.getCmp('text_id').setValue());

I Think this is solved.