ExtJS从3迁移到4-组合框使应用程序崩溃

我正在将ExtJS从3.x迁移到新的4.0.2a。似乎我的项目中的所有东西都很好，除了组合框。我在哪里使用组合框并不重要，但它会在应用程序启动时不断崩溃

im获取的错误为：未捕获范围错误：超过最大调用堆栈大小

下面是带有组合框的“我的代码登录”页面示例：

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>

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

如您所见，im使用标准组合框，其中包含sencha示例文档中的标准数据。 当我现在启动应用程序时，它会崩溃，并显示上述错误消息。 但是，当我删除组合框时，应用程序将完全工作，我将看到登录窗口并可以登录以显示My.Viewport

是什么导致了这个错误，一些代码一直在调用它自己吗？我花了很多时间来解决这个恼人的问题，但到目前为止运气不好

---

提前感谢您的帮助。

我确实看到一些您仍然需要更新的内容，例如用callParent切换超类调用，用Ext.create替换新的X调用等。但是，没有任何东西会引起堆栈溢出。您可能应该中断Firebug中的错误，并进行一些调试，以查看问题的起因。

是否可以尝试替换My.LoginWindow.superclass.initComponent.applythis参数；实际上在ExtJS4中，表单面板是Ext.form.panel，创建的语法是Ext.create'Ext.form.panel，{}；好的，我将超类改为CallParentArumings，将X改为Ext.create，并进行了一些调试，我注意到this.callParent从未被调用，它在以下方面中断：Ext.define.addListener Ext.define.bindStore Ext.define.initComponent匿名函数Base.callParent Ext.define.initComponent获得了它！我注意到，我使用了一个定制的combobox Ext.ux.TwinComboBox.js，它在ExtJS3中工作得非常好，但我想在4中不是这样。这导致堆栈溢出。现在一切都恢复正常了，我还有一个问题，有人对ExtJS4的TwinComboBox网站有参考吗？谢谢你们的帮助，我真的很感激。不确定，你们要么找到原作者，要么自己升级那个组件。我对它不熟悉。

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