Ext js从3迁移到4 - ComboBox崩溃应用程序

时间:2011-11-02 09:44:43

标签: extjs extjs4

我正在将Ext js从3.x迁移到新的4.0.2a。似乎除了组合框外,我项目中的所有内容都能正常工作。在我使用组合框的地方并不重要,但它会在启动时使我的应用程序崩溃。

我得到的错误是:未捕获RangeError:超出最大调用堆栈大小

以下是我的代码示例(带有组合框的登录页面):

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

正如您所见,我使用标准组合框和标准数据(来自sencha的示例文档)。 当我现在启动应用程序时,它会崩溃并显示上述错误消息。 但是当我删除组合框时,应用程序完全有效,我看到登录窗口并可以登录以显示My.Viewport。

什么可能导致此错误,某些代码是否一直在调用自己?我花了很多时间来解决这个恼人的问题,但到目前为止还没有运气。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

我确实看到了一些你仍然需要更新的东西,例如用callParent切换超类调用,用Ext.create()等替换新的X()调用。但是,没有任何东西会跳出来堆栈溢出。您可能应该在Firebug中解决错误并进行一些调试以查看问题的来源。