PDA

View Full Version : [FIXED] Picker "Loading..." mask stuck on



ldrvoderic
27 Oct 2011, 8:51 AM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.7

Browser versions tested against:

Internet Explorer 9.0.8112.16421
Firefox 7.0.1 (firebug 1.8.3 installed)
Google Chrome 15.0.874.106 m

Description:

ComboBox bug with load mask. On upgrading from 4.0.2a to 4.0.7 I noticed that loading mask on combo's with property queryMode='local' sometimes remains active and don't disappear when you click on picker.

Steps to reproduce the problem:

Select value from Combo1
Select value from Combo2
Repeat steps from begining but select different values in combos

The result that was expected:

Combo2 values should be displayed when we click on drop down button consistently

The result that occurs instead:

Combo2 have loading mask active although the data is loaded

Test Case:




Ext.require([
'Ext.form.field.ComboBox',
'Ext.data.*'
]);


Ext.onReady(function() {


Ext.define('Model1', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'long'},
{name: 'title', type: 'string'}
]
});


var store1 = Ext.create('Ext.data.Store', {
model: 'Model1',
data: [
{"id":1,"title":"Test1"},
{"id":2,"title":"Test2"}
]
});


Ext.define("Model2", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'http://www.sencha.com/forum/topics-remote.php',
reader: {
type: 'json',
root: 'topics'
}
},


fields: [
{name: 'id', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'}
]
});

var store2 = Ext.create('Ext.data.Store', {
model: 'Model2',
autoLoad:false
});


var combo1 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Combo1',
renderTo: Ext.getBody(),
displayField: 'title',
valueField: 'id',
store: store1,
queryMode: 'local',
width: 450,
labelWidth: 80,
listeners:{
scope: this,
'select': function(){
store2.load();
}
}
});

var combo2 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Combo2',
renderTo: Ext.getBody(),
displayField: 'title',
valueField: 'id',
store: store2,
queryMode: 'local',
forceSelection: true,
typeAhead: true,
width: 450,
labelWidth: 80
});


});



HELPFUL INFORMATION


Screenshot or Video:
28978
Possible fix:


Ext.override(Ext.form.field.ComboBox, {
createPicker: function() {
var me = this,
picker,
menuCls = Ext.baseCSSPrefix + 'menu',
opts = Ext.apply({
pickerField: me,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
ownerCt: me.ownerCt,
cls: me.el.up('.' + menuCls) ? menuCls : '',
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
pageSize: me.pageSize,
tpl: me.tpl,
loadMask: me.queryMode === 'local' ? false: true
}, me.listConfig, me.defaultListConfig);


picker = me.picker = Ext.create('Ext.view.BoundList', opts);
if (me.pageSize) {
picker.pagingToolbar.on('beforechange', me.onPageChange, me);
}


me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});


me.mon(picker.getSelectionModel(), {
'beforeselect': me.onBeforeSelect,
'beforedeselect': me.onBeforeDeselect,
'selectionchange': me.onListSelectionChange,
scope: me
});


return picker;
}
});



Additional CSS used:

only default ext-all.css

Operating System:

Windows 7 Professional

GArrow
30 Oct 2011, 3:47 PM
REQUIRED INFORMATION


Ext version tested:

Ext 4.0.7


Browser versions tested against:

Firefox 7.0.1


Description:

Using a ComboBox in local mode with a store that gets updated. This worked fine with 4.0.2a, but with 4.0.7 the ComboBox (Picker) gets stuck saying "Loading..." the second time the store is loaded, despite the loading having finished.


Steps to reproduce the problem:

Create a ComboBox in local mode with a store that can be re-loaded.
View the ComboBox
Load the store with new values
View the ComboBox


The result that was expected:

ComboBox would show the new values (ss it did in 4.0.2a).


The result that occurs instead:

The 'Loading...' mask stays in place and the ComboBox is unusable
The new values for the Store are obviously present behind the mask



HELPFUL INFORMATION


Debugging already done:

Determined that the ComboBox (apparently) is not taking any action on the store's "load" event to tell its picker to stop showing the loading mask.


Possible fix:

Subclassing the ComboBox with a version that handles the store load event. This code can be added to the constructor:



store.on('load', function () { this.getPicker().setLoading(false); }, this);

ldrvoderic
31 Oct 2011, 11:09 AM
Here is also suggestion for general solution. Loading mask won't show on combos that have parameter queryMode = 'local'
http://www.sencha.com/forum/showthread.php?152499-4.0.7-ComboBox-bug-with-load-mask (http://www.sencha.com/forum/showthread.php?152499-4.0.7-ComboBox-bug-with-load-mask)

mitchellsimoens
31 Oct 2011, 11:40 AM
Can one of you post a test case as my test I'm not seeing this behavior. Here is what I have:


Ext.define('TestModel', {
extend : 'Ext.data.Model',

fields : [
'company',
'price',
'change',
'pctChange',
{ name : 'lastChange', type : 'date', dateFormat : 'n/j g:ia' }
]
});

var store = Ext.create('Ext.data.Store', {
model : 'TestModel',

autoLoad : true,

proxy : {
type : 'ajax',
url : 'data.php',
reader : {
type : 'json',
root : 'data'
}
}
});

var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo : Ext.getBody(),
store : store,
queryMode : 'local',
displayField : 'company',
valueField : 'company',
listeners : {
expand : function() {
console.log('expanded');

setTimeout(function() {
store.load({
params : {
sleep : 2
}
});
}, 2000);
}
}
});

data.php looks like this:


<?php

if (isset($_REQUEST['sleep'])) {
sleep($_REQUEST['sleep']);
}

header('Content-Type: application/json');

echo '{
"data" : [
{ "company" : "3m Co", "price" : 71.72, "change" : 0.02, "pctChange" : 0.03, "lastChange" : "9/1 12:00am" },
{ "company" : "Alcoa Inc", "price" : 29.01, "change" : 0.42, "pctChange" : 1.47, "lastChange" : "9/1 12:00am" },
{ "company" : "Altria Group Inc", "price" : 83.81, "change" : 0.28, "pctChange" : 0.34, "lastChange" : "9/1 12:00am" },
{ "company" : "American Express Company", "price" : 52.55, "change" : 0.01, "pctChange" : 0.02, "lastChange" : "9/1 12:00am" },
{ "company" : "American International Group, Inc.", "price" : 64.13, "change" : 0.31, "pctChange" : 0.49, "lastChange" : "9/1 12:00am" },
{ "company" : "AT&T Inc.", "price" : 31.61, "change" : -0.48, "pctChange" : -1.54, "lastChange" : "9/1 12:00am" },
{ "company" : "Boeing Co.", "price" : 75.43, "change" : 0.53, "pctChange" : 0.71, "lastChange" : "9/1 12:00am" },
{ "company" : "Caterpillar Inc.", "price" : 67.27, "change" : 0.92, "pctChange" : 1.39, "lastChange" : "9/1 12:00am" },
{ "company" : "Citigroup, Inc.", "price" : 49.37, "change" : 0.02, "pctChange" : 0.04, "lastChange" : "9/1 12:00am" },
{ "company" : "E.I. du Pont de Nemours and Company", "price" : 40.48, "change" : 0.51, "pctChange" : 1.28, "lastChange" : "9/1 12:00am" },
{ "company" : "Exxon Mobil Corp", "price" : 68.1, "change" : -0.43, "pctChange" : -0.64, "lastChange" : "9/1 12:00am" },
{ "company" : "General Electric Company", "price" : 34.14, "change" : -0.08, "pctChange" : -0.23, "lastChange" : "9/1 12:00am" },
{ "company" : "General Motors Corporation", "price" : 30.27, "change" : 1.09, "pctChange" : 3.74, "lastChange" : "9/1 12:00am" },
{ "company" : "Hewlett-Packard Co.", "price" : 36.53, "change" : -0.03, "pctChange" : -0.08, "lastChange" : "9/1 12:00am" },
{ "company" : "Honeywell Intl Inc", "price" : 38.77, "change" : 0.05, "pctChange" : 0.13, "lastChange" : "9/1 12:00am" },
{ "company" : "Intel Corporation", "price" : 19.88, "change" : 0.31, "pctChange" : 1.58, "lastChange" : "9/1 12:00am" },
{ "company" : "International Business Machines", "price" : 81.41, "change" : 0.44, "pctChange" : 0.54, "lastChange" : "9/1 12:00am" },
{ "company" : "Johnson & Johnson", "price" : 64.72, "change" : 0.06, "pctChange" : 0.09, "lastChange" : "9/1 12:00am" },
{ "company" : "JP Morgan & Chase & Co", "price" : 45.73, "change" : 0.07, "pctChange" : 0.15, "lastChange" : "9/1 12:00am" },
{ "company" : "McDonald Corporation", "price" : 36.76, "change" : 0.86, "pctChange" : 2.40, "lastChange" : "9/1 12:00am" },
{ "company" : "Merck & Co., Inc.", "price" : 40.96, "change" : 0.41, "pctChange" : 1.01, "lastChange" : "9/1 12:00am" },
{ "company" : "Microsoft Corporation", "price" : 25.84, "change" : 0.14, "pctChange" : 0.54, "lastChange" : "9/1 12:00am" },
{ "company" : "Pfizer Inc", "price" : 27.96, "change" : 0.4, "pctChange" : 1.45, "lastChange" : "9/1 12:00am" },
{ "company" : "The Coca-Cola Company", "price" : 45.07, "change" : 0.26, "pctChange" : 0.58, "lastChange" : "9/1 12:00am" },
{ "company" : "The Home Depot, Inc.", "price" : 34.64, "change" : 0.35, "pctChange" : 1.02, "lastChange" : "9/1 12:00am" },
{ "company" : "The Procter & Gamble Company", "price" : 61.91, "change" : 0.01, "pctChange" : 0.02, "lastChange" : "9/1 12:00am" },
{ "company" : "United Technologies Corporation", "price" : 63.26, "change" : 0.55, "pctChange" : 0.88, "lastChange" : "9/1 12:00am" },
{ "company" : "Verizon Communications", "price" : 35.57, "change" : 0.39, "pctChange" : 1.11, "lastChange" : "9/1 12:00am" },
{ "company" : "Wal-Mart Stores, Inc.", "price" : 45.45, "change" : 0.73, "pctChange" : 1.63, "lastChange" : "9/1 12:00am" }
]
}';

?>

ldrvoderic
1 Nov 2011, 6:03 AM
Try this one:

Test Case:




Ext.require([
'Ext.form.field.ComboBox',
'Ext.data.*'
]);


Ext.onReady(function() {


Ext.define('Model1', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'long'},
{name: 'title', type: 'string'}
]
});


var store1 = Ext.create('Ext.data.Store', {
model: 'Model1',
data: [
{"id":1,"title":"Test1"},
{"id":2,"title":"Test2"}
]
});


Ext.define("Model2", {
extend: 'Ext.data.Model',
proxy: {
type: 'jsonp',
url : 'http://www.sencha.com/forum/topics-remote.php',
reader: {
type: 'json',
root: 'topics'
}
},


fields: [
{name: 'id', mapping: 'post_id'},
{name: 'title', mapping: 'topic_title'}
]
});

var store2 = Ext.create('Ext.data.Store', {
model: 'Model2',
autoLoad:false
});


var combo1 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Combo1',
renderTo: Ext.getBody(),
displayField: 'title',
valueField: 'id',
store: store1,
queryMode: 'local',
width: 450,
labelWidth: 80,
listeners:{
scope: this,
'select': function(){
store2.load();
}
}
});

var combo2 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Combo2',
renderTo: Ext.getBody(),
displayField: 'title',
valueField: 'id',
store: store2,
queryMode: 'local',
forceSelection: true,
typeAhead: true,
width: 450,
labelWidth: 80
});


});


Steps to reproduce the problem:

Select value from Combo1
Select value from Combo2
Repeat steps from begining but select different values in combos

nikadod
14 Nov 2011, 7:58 AM
Will this issue be accepted as a bug? I believe the example provided above is descriptive enough.

I have the same issue with 4.0.7, and in fact its reproduced in a very simple way:
Just create a ComboBox with remote store, and a Button. Expand the combo once.
Then try to reload combo's store on button click - after further opening of ComboBox, the picker gets masked with "Loading..." message on top. And this mask never disappears.

burnnat
18 Nov 2011, 6:48 AM
Bump bump - just ran into this issue too with 4.0.7. Someone provided an override here (http://www.sencha.com/forum/showthread.php?152875-Combobox-loadMask-loop&p=667019&viewfull=1#post667019) in the discussion forum that seems to help.

Edit: Just tested with 4.1pr1, and it seems to be a little better there - the LoadMask is no longer stuck on, but it still shows up mysteriously in the upper-left corner of the page if the second combobox isn't expanded at the time.

themel
21 Nov 2011, 3:44 AM
Same problem here with 4.0.7. I think it wasn't there or at least not as easily triggerable & permanent in 4.0.2a.

mitchellsimoens
21 Nov 2011, 6:45 AM
Edit: Just tested with 4.1pr1, and it seems to be a little better there - the LoadMask is no longer stuck on, but it still shows up mysteriously in the upper-left corner of the page if the second combobox isn't expanded at the time.

Now that bug I can reproduce and will create a bug for that.

evant
7 Dec 2011, 7:56 PM
Looks like a dupe of http://www.sencha.com/forum/showthread.php?150040-Unexplained-load-mask-in-upper-left-corner-of-browser-again

This should be fixed in the next 4.1 release.