me.dockedItems error in ExtJS

Question

I was trying to test out a script i write on firebug console and i think the script is simple enough. And when i ran the script, i got this error me.dockedItems is undefined. Here's the code i run from Firefox's firebug console:

Ext.create('Ext.window.Window',{
    title : 'Login',
    width : 400,
    height : 500,
    initComponent : function() {
        var me = this;

        var usernameField = Ext.create('Ext.form.field.Text',{
            fieldLabel : 'Net ID',
            allowBlank : false,
            labelWidth : 150,
            width : 150,
            emptyText : 'Net ID'
        });

        var passField = Ext.create('Ext.form.field.Text',{
            fieldLabel : 'Password',
            allowBlank : false,
            labelWidth : 150,
            width : 150,
            emptyText : 'Pass'
        });

        this.items = [usernameField,passField];
        this.callParent(arguments);
    }
}).show();

I appreciate your help to find what is wrong with the code

Answer 1

I got this error when doing

Ext.define('blah', {

    initComponent: function(){
        //do stuff
    }
});

It turns out this question was sortof pointing the right direction but you will also get this mysterious error if you don't call

this.callParent(arguments);

at the end of initComponent. Useful!

Answer 2

Don't override initComponent when creating an instance.

Ext.create('Ext.window.Window', {
    title: 'Login',
    width: 400,
    height: 500,
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Net ID',
        allowBlank: false,
        labelWidth: 150,
        width: 150,
        emptyText: 'Net ID'
    }, {
        xtype: 'textfield',
        fieldLabel: 'Password',
        allowBlank: false,
        labelWidth: 150,
        width: 150,
        emptyText: 'Pass'
    }]
}).show();