PDA

View Full Version : Reset or clear value of a combo box



gubespam
14 Mar 2011, 2:57 PM
Using Ext 4.0 pr 3.

I have a combo box whose value I would like to clear as a result of a user action. I can successfully "clear" the combo box so that it visually appears to be cleared, but after doing so, the combobox will no longer allow the user to select the same value again (eg. user selects "Rover", clicks "Clear", then tries to select "Rover" again). The combobox just ignores these clicks until the user selects a different value than before. The example below shows that Ext doesn't even fire the "select" event when the user the same value after the clear.

I have tried many different approaches (see below) but none of them seem to work. Is this a bug or am I doing something wrong?



Ext.regModel('Dog', {
fields: [
'name'
]
});

var petStore = new Ext.data.Store({
model: 'Dog',
data: [
{id:123,name:'Rover'},
{id:456,name:'Alfred'}
]
});

// ComboBox with list of clients
var petCombo = new Ext.form.ComboBox({
id: 'pet-combo',
name : 'dog',
valueField: 'name',
displayField: 'name',
allowBlank: false, // doesn't seem to do anything
emptyText : "Pick a pet",
fieldLabel: "Dog",
store: petStore,
queryMode: 'local',
forceSelection: true,
listeners:{
scope: this,
'select': function(cmb, recs, idx) {
console.log('selected:' + (recs.length > 0 ? recs[0].get('name') : undefined));
}
},
});

var petForm = Ext.create('Ext.form.FormPanel', {
frame : true,
title : "Pet Store",
width : 150,
fieldDefaults : {
labelWidth : 50
},
items: [
petCombo,
{
xtype: 'button',
text : "Clear",
handler : function() {
petForm.getForm().reset();
var cc = Ext.getCmp('pet-combo');
cc.clearValue();
cc.reset();
cc.setValue("");
cc.setValue(null);
cc.setValue(undefined);
}
} ]
});

gubespam
14 Mar 2011, 5:15 PM
After digging around in the Ext 4 source code and trying various options, I found a workaround.

It appears that the root of the problem is in ComboBox.setValue(). This method ignores empty values (like undefined), but not empty arrays. As a result, reset() effectively does nothing when no original value is specified for the combo box, because originalValue=undefined and reset() calls setValue(originalValue). On the other hand, clearValue() calls setValue() with an empty array.

Ultimately, the reason users cannot re-select the value that was selected before (even after calling clearValue()), is that the selection model still thinks something is selected. It thinks this because setValue() does not update the selection model when passed 'undefined' or an empty array.

The following workaround seems to work as desired (clear value, reset "unselected text" and allow user to select previous value again):



cc.clearValue();
cc.applyEmptyText();
cc.getPicker().getSelectionModel().doMultiSelect([], false);

gubespam
17 Mar 2011, 3:46 PM
Moderator: Please move this to the bug fourm for Ext 4.x. I did not know whether this was a bug when I originally created the thread.

jjohnston
4 Apr 2011, 1:53 PM
I've replied to this in the bug forum's post: http://www.sencha.com/forum/showthread.php?128709-Reset-or-clear-value-of-a-combo-box

I'm unable to reproduce this issue in beta1, it seems to have been fixed. Can you please verify?