VERY SLOW behavior of fields in nested panels (compared to extjs 3)
here is an exemple to show how SLOW can behave extjs 4 (the same type of code is IMMEDIATE in extjs3)
in the code below, I create 4 comboboxes that I put in multiple nested panels (7 levels of nested panels)
complex applications can easily reach this number of nested panels
selecting an element in the first combo, will show / hide the others. this operation can take several seconds even with chrome, it's crazy.
Code:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
// Store creation
Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});
// The data for all states
var states = [
{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"},
{"abbr":"AR","name":"Arkansas","slogan":"The Natural State"}];
var store = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});
// a Combobox
var simpleCombo2 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'combo2',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: false,
forceSelection: true,
allowBlank : false
});
// a Combobox
var simpleCombo3 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'combo3',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: false,
forceSelection: true,
allowBlank : false
});
// a Combobox
var simpleCombo4 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'combo4',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: false,
forceSelection: true,
allowBlank : false
});
// a Combobox with a listener
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'combo1',
displayField: 'name',
width: 320,
labelWidth: 130,
store: store,
queryMode: 'local',
typeAhead: false,
forceSelection: true,
allowBlank : false,
listeners : { select : function()
{
simpleCombo2.setVisible(!simpleCombo2.isVisible());
simpleCombo3.setVisible(!simpleCombo3.isVisible());
simpleCombo4.setVisible(!simpleCombo4.isVisible());
}
}
});
Ext.create ('Ext.panel.Panel',
{
title : 'a panel',
layout : 'anchor',
border : true,
autoScroll : false,
renderTo : Ext.getBody(),
items : [{
items : [
{
items : [
{
items : [
{
items : [
{
items : [
{
items : [
{
items : [ simpleCombo,
simpleCombo2,
simpleCombo3,
simpleCombo4]
}]
}]
}]
}]
}]
}]
}]
});
});
Edit : I confirm this pb is fixed in 4.0.2
