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中打破錯誤並進行一些調試以查看問題的起源。