Ext js migration from 3 to 4 - ComboBox crashes application - extjs

Question

I am migrating Ext js from 3.x to the new 4.0.2a. Seems that everything in my project works fine except of comboboxes. It doesn't really matter where i use a combobox, but it keeps crashing my application on launch.
the error im getting is: Uncaught RangeError: Maximum call stack size exceeded
Here is an example of my code (login page with combobox):
index.html:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="ext3-core-compat.js"></script>
<script type="text/javascript" src="ext3-compat.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/My.Viewport.js"></script>
<script type="text/javascript" src="js/My.LoginWindow.js"></script>
app.js:
Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
Ext.ns('My');
My.Base = function (){
Ext.QuickTips.init();
return {
init: function () {
var win = Ext.create('My.LoginWindow',{
title: 'Authorization',
callback: function(){
new Dag.Viewport();
}
});
win.show();
}
}
}();
Ext.onReady(My.Base.init, My.Base);
My.LoginWindow.js:
Ext.define('My.LoginWindow', {
extend:'Ext.Window',
//alias: 'widget.LoginWindow', This is not required.
initComponent: function(){
Ext.define('test', {
extend: 'Ext.data.Model',
fields: ['abbr', 'name']
});
var states = Ext.create('Ext.data.Store', {
model: 'test',
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
this.form = Ext.create('Ext.form.Panel',{
baseCls: 'x-plain',
defaultType: 'textfield',
defaults: {
labelWidth: 55,
allowBlank: false,
anchor:'100%'
},
items: [{
xtype: 'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
},{
fieldLabel: 'Account',
name: 'account'
},{
fieldLabel: 'Login',
name: 'login'
},{
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
listeners: {
'specialkey': function(field, e){
if (e.getKey() == 13){
this.submitForm();
}
},
scope: this
}
}]
});
Ext.apply(this, {
modal: true,
resizable: false,
closable: false,
plain: true,
width: 200,
draggable: false,
bodyStyle:'padding:5px;',
items: this.form,
buttons: [{
text: 'Login',
handler: this.submitForm,
scope: this
},{
text: 'Cancel',
handler: function(){
this.form.getForm().reset();
},
scope: this
}]
});
this.callParent(arguments);
},
submitForm: function(){
var f = this.form.getForm();
f.submit({
url: 'myurl',
waitMsg: 'Login...',
waitTitle: 'Wait',
scope: this,
success: function(form, action){
this.callback.call();
this.close();
},
failure: function(form, action){
var res = action.result;
var msg = 'Enter correct login and password, please.'
if (res && res.message){
msg = res.message;
}
Ext.Msg.alert('Error', msg);
}
});
}
});
As you can see im using a standard combobox with standard data (from sencha's example docs).
When i now launch the application, it crashes with the error message described above.
But when i remove the combobox, the application fully works, i see the login window and can login to show the My.Viewport.
What can cause this error, does some code call itself all the time? I've spend many hours fixing this annoying problem, but no luck so far.
Thanks for your help in advance.

Answer 1

I do see some things you still need to update, for example switching the superclass call with callParent, replacing the new X() calls with Ext.create(), etc. However, nothing jumps out at me that would be causing a stack overflow. You should probably break on errors in Firebug and do a little debugging to see where the issue is originating.