Note that there are some explanatory texts on larger screens.

plurals
  1. POExt js migration from 3 to 4 - ComboBox crashes application
    text
    copied!<p>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. </p> <p>the error im getting is: <strong>Uncaught RangeError: Maximum call stack size exceeded</strong></p> <p>Here is an example of my code (login page with combobox):</p> <p>index.html:</p> <pre><code>&lt;link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /&gt; &lt;script type="text/javascript" src="ext-all-debug.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="ext3-core-compat.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="ext3-compat.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/My.Viewport.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/My.LoginWindow.js"&gt;&lt;/script&gt; </code></pre> <p>app.js:</p> <pre><code>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); </code></pre> <p>My.LoginWindow.js:</p> <pre><code>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 &amp;&amp; res.message){ msg = res.message; } Ext.Msg.alert('Error', msg); } }); } }); </code></pre> <p>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.</p> <p>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. </p> <p>Thanks for your help in advance.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload