PDA

View Full Version : [OPEN] [4.0.1] Two bugs for ComboBox and/or Data.Store



SommerEngineering
5 Jun 2011, 5:03 AM
I found two bugs within the ComboBox and/or Data.Store!



<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

new Ext.data.Store({
storeId: 'store',
fields: ['key', 'text'],
data: []
});

new Ext.form.Panel({
renderTo: Ext.getBody(),
items : [

new Ext.form.field.ComboBox({
id: 'combo',
allowBlank: false,
forceSelection: true,
fieldLabel: 'Please choose',
queryMode: 'local',
displayField: 'text',
valueField: 'key',
store: 'store',
width: 300
})

,

new Ext.button.Button({
text: 'small amount',
handler: function ()
{
var store = Ext.getStore("store");
store.removeAll();
Ext.getCmp("combo").clearValue();
for(n = 0; n < 6; n++)
{
store.loadData([["" + n, "Pizza " + n]], true);
}
}
})

,

new Ext.button.Button({
text: 'huge amount',
margin: 3,
handler: function ()
{
var store = Ext.getStore("store");
store.removeAll();
Ext.getCmp("combo").clearValue();
for(n = 0; n < 1200; n++)
{
store.loadData([["" + n, "Car " + n]], true);
}
}
})
]
});
});
</script>

</head>
<body>
</body>
</html>


Bug 1: If I load a small amount of data into the store, the ComboxBox shows everything correct. If I load then a huge amount of data, the scroll bar not appears - the list is longer than the screen height. But if you load first the huge list, it's okay. If you load many times the huge list, everything is still okay.

Bug2: If you load first the huge list, everything is fine: It is very fast, with or without sorting doesn't matter. But: If you load the huge list a second time, it's very slow on all browsers, even without sorting! The Firefox 4 and IE 9 are really worse, there need many, many seconds to response again. Google Chrome 11 is the fasted browser for that, by still need 6 seconds with my MacBookPro with Intel i5 within Windows 7.

SommerEngineering
7 Jun 2011, 7:06 AM
@Sencha: You are able to reproduce my 2 bugs with my code? Will that be fixed within 4.0.2? :-/

todic
9 Jun 2011, 5:15 AM
Hi,

I can confirm first bug.

Workaround:
Use combo's "expand" event to manually set picker height if it is larger than a maxHeight. For example:


if(combo.picker.getHeight() > 300) {
combo.picker.setHeight(300);
}

SommerEngineering
9 Jun 2011, 11:10 AM
I re-tested this again with 4.0.2: Both bugs are still there ;)

SommerEngineering
27 Jun 2011, 8:18 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.1 and 4.0.2


Browser versions tested against:

Chrome (Windows)
IE9
FF4 (Windows)


Description:

Bug 1: If I load a small amount of data into the store, the ComboxBox shows everything correct. If I load then a huge amount of data, the scroll bar not appears.
Bug 2: If you load first the huge list, everything is fine: It is very fast, with or without sorting doesn't matter. But: If you load the huge list a second time, it's very slow on all browsers, even without sorting!


Steps to reproduce the problem:

Bug 1, Step 1: Load a small amount of data using the code below.
Bug 1, Step 2: Load a huge amount of data using the code below.
Bug 2, Step 1: Load a huge amount of data using the code below.
Bug 2, Step 2: Load a huge amount of data again.


The result that was expected:

Bug 1: The scroll bar appears!
Bug 2: Any time I load the data, it needs the same time to load!


The result that occurs instead:

Bug 1: The scroll bar does not appear, it is not possible to select all items.
Bug 2: The second time, the same amount of data needs very long time to load. Why it is so fast for the first time?


Test Case:



<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {

new Ext.data.Store({
storeId: 'store',
fields: ['key', 'text'],
data: []
});

new Ext.form.Panel({
renderTo: Ext.getBody(),
items : [

new Ext.form.field.ComboBox({
id: 'combo',
allowBlank: false,
forceSelection: true,
fieldLabel: 'Please choose',
queryMode: 'local',
displayField: 'text',
valueField: 'key',
store: 'store',
width: 300
})

,

new Ext.button.Button({
text: 'small amount',
handler: function ()
{
var store = Ext.getStore("store");
store.removeAll();
Ext.getCmp("combo").clearValue();
for(n = 0; n < 6; n++)
{
store.loadData([["" + n, "Pizza " + n]], true);
}
}
})

,

new Ext.button.Button({
text: 'huge amount',
margin: 3,
handler: function ()
{
var store = Ext.getStore("store");
store.removeAll();
Ext.getCmp("combo").clearValue();
for(n = 0; n < 1200; n++)
{
store.loadData([["" + n, "Car " + n]], true);
}
}
})
]
});
});
</script>

</head>
<body>
</body>
</html>




HELPFUL INFORMATION


Screenshot or Video:

N/A yet. If this is helpful, I can create a video.


See this URL for live test case: N/A


Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

only default ext-all.css


Operating System:

Windows 7 Professional, 64 Bit, English
Intel i5 CPU with 4 cores
8 GB RAM
Fast SSD

brocktopia
13 Jul 2011, 5:41 PM
I can confirm Bug 1 and add some detail.

If you load enough data to cause the combo list to scroll it will work fine, but if you reload different data that doesn't need to scroll and then subsequently load data that should scroll the picker sizes to fit the data (off the display area in my case) and doesn't scroll. todic's workaround fixes this when called after modifying data.

I'm not seeing any delay though when loading new data (my largest data set only has 60 fields though).

aleksandy
13 Jul 2011, 6:19 PM
scrollbar fix (http://www.sencha.com/forum/showthread.php?139608-4.0.1-combox-scrollbar-lost-when-store.loadData-called&p=624066&viewfull=1#post624066)

deepinkumar
13 Jul 2011, 10:54 PM
i will check out those concepts and i will try.. after that i will give the solution for that....

Cegonsoft web 2.0 training (http://www.cegonsoft.com/webtechnology.php)

deepinkumar
13 Jul 2011, 10:56 PM
If ComboBox.js were modified to add an onLoad event to the store when the combobox is constructed, then this would solve the problem. Something to the effect of:

this.store.on('load',this.onLoad,this); .... onLoad: function() { this.setValue(this.getValue()); }

Cegonsoft web 2.0 training (http://www.cegonsoft.com/webtechnology.php)

dogomatic
24 Feb 2012, 1:05 AM
None of the solutions here worked for me. (I'm on 4.0.7)

After stepping through the layout code for like 3 hours, I solved it by changing Ext.layout.component.BoundList like so:

In onLayout, change this > to >= with an override.

from


else if (naturalHeight > maxHeight) {
constrainedHeight = maxHeight;
}

to


else if (naturalHeight >= maxHeight) {
constrainedHeight = maxHeight;
}

I couldn't believe it works but it does.