PDA

View Full Version : [FIXED][3.0.0] ComboBox listEmptyText ineffective



Gjslick
31 Jul 2009, 11:05 AM
It seems that the listEmptyText config on the ComboBox has no effect. I'm using a remotely loaded ComboBox, and have set the listEmptyText to "No Matches Found."

When some text is entered that will actually return results, I get the appropriate list. However, when some text is entered that will return no results, I get the "Loading" spinner image and text, but then the DataView disappears altogether.

Here is my current combo config:


{
xtype: 'combo',
name: 'teacherIDCombo',
hiddenName: 'teacherID',
fieldLabel: "Teacher",
emptyText: "Type a Teacher's Name or Select",

store: new Ext.data.JsonStore( {
fields: [ 'teacherID', 'teacherName' ],
url: 'getTeachers.cfm' // Yes ColdFusion, and proud of it!
} ),
mode: 'remote',
valueField: 'teacherID',
displayField: 'teacherName',

listEmptyText: "No Matches Found.",
minChars: 0, // Any number of characters should query
queryDelay: 200,
queryParam: 'nameToSearch',

forceSelection: true,
triggerAction: 'all',
typeAhead: false
}
Am I doing something wrong here? Or is this possibly a bug?

Just as a note, I get the same behavior in both FF 3.5 and IE 8.

Greg

Animal
31 Jul 2009, 1:50 PM
Your Store is not loading.

Add an exception listener to your Store.

Gjslick
31 Jul 2009, 4:09 PM
Animal, my store is loading. I get results as long as the name being typed still matches a name in my database. It's just when the name being typed no longer matches an entry, it should say "No Matches Found", which I'm under the impression from the API documentation that the listEmptyText config should do for me. Instead, I get the loading indicator, and then the dropdown list (the DataView) disappears completely.

Although it didn't make sense to me that the store would throw an exception just because it received no records, I put an exception handler in there with an alert. It didn't go off. Also, firebug shows that the HTTP request was made successfully, just returning an empty array in JSON format.


I did some checking of the source code, and I believe that the problem is in the onLoad method of ComboBox. If the store has 0 records when loaded, it runs onEmptyResults(), which in turn runs collapse(), collapsing the dropdown list. So the DataView is actually showing "No Matches Found" as it should, but because the ComboBox is collapsing the list, we just don't get to see it.

It seems the fix is simple for. All that would be needed is to have onEmptyResults() check if the emptyText config for the DataView was configured with actual text, and if it is, to not collapse the dropdown list.

The following override solved the problem for me, and seems it would be a correct addition to the actual source code, as onEmptyResults() is only called from onLoad(). However, I have not looked into the complications of adding this, such as from pre-loading a Combo's store.



Ext.override( Ext.form.ComboBox, {
onEmptyResults : function() {
if( this.view.emptyText === '' ) // No emptyText config set in the DataView, collapse
this.collapse();
}
} );
Should I file this as a bug in the Bugs forum, or can you take it from here?

Greg

mjlecomte
31 Jul 2009, 6:02 PM
It would be quite helpful if you make a runnable showcase for the problem so we can verify there's a problem more easily.

Animal
1 Aug 2009, 12:16 AM
What does the server return when no matches are found?

The Store has to load zero Records from a valid response object.

Condor
1 Aug 2009, 2:41 AM
This looks like a bug.

Try to expand and collapse the following combobox multiple times. Only the first expand will show the empty text.

new Ext.form.ComboBox({
store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy([]),
reader: new Ext.data.ArrayReader({fields: ['field1']})
}),
mode: 'remote',
displayField: 'field1',
triggerAction: 'all',
listEmptyText: 'Empty',
renderTo: Ext.getBody()
});

mjlecomte
1 Aug 2009, 3:56 AM
Suggested fix didn't work for me. I had better results with this (which restricts height, etc):


// private
onLoad : function(){
if(!this.hasFocus){
return;
}
if((this.store.getCount() > 0) || this.listEmptyText ){
// if(this.store.getCount() > 0){
this.expand();
this.restrictHeight();
if(this.lastQuery == this.allQuery){
if(this.editable){
this.el.dom.select();
}
if(!this.selectByValue(this.value, true)){
this.select(0, true);
}
}else{
this.selectNext();
if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
this.taTask.delay(this.typeAheadDelay);
}
}
}else{
this.onEmptyResults();
}
//this.el.focus();
},


One more tweak needed to handle tabbing out of field. If there are items in the combo store, when you tab from the field onViewClick will normally find a record and if a record is found call onSelect which will collapse the list. If the store is empty, there are no records, so the onSelect is bypassed and consequently the list is not collapsed, so we need to collapse the list manually:


// private
onViewClick : function(doFocus){
var index = this.view.getSelectedIndexes()[0];
var r = this.store.getAt(index);
if(r){
this.onSelect(r, index);
// if no record then hide the list
} else {
this.collapse();
}
if(doFocus !== false){
this.el.focus();
}
},


For reference onSelect has:


// private
onSelect : function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.setValue(record.data[this.valueField || this.displayField]);
this.collapse();
this.fireEvent('select', this, record, index);
}
},

Gjslick
1 Aug 2009, 9:41 AM
Animal, as I said in my second post, the server is returning "an empty array in JSON format". I.e. "[ ]" (without the quotes). But I understand that you deal with a lot of noobs on the forum, so I understand where you're coming from when your first idea of trouble is PEBKAC (problem exists between keyboard and chair ;)B))

Mjlecomte and Condor, thanks for taking a look into this. I whipped up a quick example anyway and attached it. Mjlecomte, your fix is definitely better, but actually both suffer from a problem in that tabbing away from the ComboBox when the listEmptyText is being shown does not cause the dropdown list to be collapsed.

Thanks again all,

Greg

mjlecomte
1 Aug 2009, 2:57 PM
I corrected my prior post, try that out.

Gjslick
2 Aug 2009, 2:52 PM
Hey, that works nicely mjlecomte. Thanks for your help on this.

All the best,

Greg

evant
2 Aug 2009, 10:45 PM
Fixed in the 3.x branch. The bug doesn't apply to 2.x because listEmptyText isn't supported there.

Gjslick
3 Aug 2009, 8:25 AM
Sounds good Evant, thanks.

Greg