Error me.dockedItems in ExtJS

Question

I tried to test the script, I write in the firebug console, and I think the script is quite simple. And when I ran the script, I got this me.dockedItems undefined error. Here is the code that I run from the Firefox 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 out what is wrong with the code.

Answer 1

I got this error while executing

 Ext.define('blah', { initComponent: function(){ //do stuff } }); 

It turns out this question was right, pointing in the right direction, but you will also get this cryptic error if you don't name

 this.callParent(arguments); 

at the end of initComponent. Useful!

Answer 2

You should not override initComponent when instantiating.

 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();