ComboBox "Loading..." mask won't go away when drop-down list visible

[myExtJsUname]

I've tried the suggestions I've found in this forum but haven't had any success yet. I'm hoping someone can take a quick look and see if they can identify what I am missing or incorrectly defining. I started out with a web service JSON store that was exhibiting this behaviour and have been making the example simpler and simpler trying to find where I am going wrong. Now, it's as simple as I can make it and I still can't see the problem.

The scenario:
Based on previous selections, I am dynamically creating a ComboBox and adding it to an empty Ext.panel.Panel with the code below. After rendering, and when I click on the ComboBox's down arrow, the selection possibilities remain greyed out and there is a "Loading..." mask that never goes away. I'm assuming I've missed something along the way in defining these items but can't find what is missing.

Any help would be appreciated.

Cheers,
jtm


Ext.define(
"classificationMethod"
,{
extend: "Ext.data.Model"
,fields: ["key", "text"]
}
);

var store = Ext.create(
'Ext.data.Store'
,{
model: 'classificationMethod'
,data: [
{
key: "equal-interval"
,text: "Equal Interval"
}
,{
key: "natural-breaks"
,text: "Natural Breaks"
}
,{
key: "quantile"
,text: "Quantile"
}
]
}
);

this.cmbClassMethod = Ext.create(
'Ext.form.field.ComboBox'
,{
emptyText: "Select classification method to use..."
,anchor: "100%"
,store: store
,displayField: "text"
,valueField: "key"
,forceSelection: true
}
);

[ErnestoR]

If your using ExtJs 4.0.7 has a known bug regarding the LoadMask class.

Try this override and see if it helps:



Ext.override(Ext.LoadMask, {
onHide: function() {
this.callParent();
}
});

[scottmartin]

Or upgrade to 4.1.1 ;)

Scott.

[myExtJsUname]

Sorry, I should have said that I am using ExtJs 4.1.1; but thanks for taking the time to respond anyway.

[scottmartin]

See if this works:




Ext.define("classificationMethod", {
extend: "Ext.data.Model",
fields: ["key", "name"]
});

var store = Ext.create('Ext.data.Store', {
model: 'classificationMethod',
data: [
{"key": "equal-interval", "name": "Equal Interval"},
{"key": "natural-breaks", "name": "Natural Breaks"},
{"key": "quantile", "name": "Quantile"}
]
});

Ext.create('Ext.form.field.ComboBox', {
emptyText: "Select classification ... ",
store: store,
displayField: "name",
valueField: "key",
queryMode: 'local',
forceSelection: true,
renderTo: Ext.getBody()
});


Scott.

[myExtJsUname]

Thank you, Scott. Setting the queryMode to "local" did the trick.

I'm guessing, then, that setting it to "remote" for the web service JSON store definition I was orginally trying to do will take care of the problem that was appearing in my app. At this point, I've changed the code so much just trying to get something (anything) in this regard to work, that I'm effectively starting over again.

I'll indicate if that takes care of my real problem later, but certainly setting queryMode to "local" takes care of this thread's question. I'll mark it answered based on that and if I find I still can't get the remote one working I'll try to come up with a better example of that specifically and start a new thread.

Cheers,
jtm