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

Question

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

你可以使用标准数据的标准组合框（从煎茶的例子文档）见IM。 当我现在启动应用程序时，它会崩溃，并显示上述错误消息。 但是，当我删除组合框，应用程序完全工作，我看到登录窗口，并可以登录显示My.Viewport。

什么会导致这个错误，一段代码是否会自动调用？我花了很多时间来解决这个烦人的问题，但迄今为止还没有运气。

感谢您的帮助提前。

Answer 1

我确实看到了一些你仍然需要更新的东西，例如用callParent切换超类调用，用Ext.create（）等替换新的X（）调用等等。但是，没有什么会跳出来，导致堆栈溢出。您应该在Firebug中打破错误并进行一些调试以查看问题的起源。