[2.0] Ext.ux.TwinComboBox to Clear Field

[mikegiddens]

I have made a small extension to clear the value from the ComboBox. It uses a listener 'clear' so you can do something once the value has been cleared. It also clears the [x] if the you call form.reset()

Known Issues: All the config issues are the same as ComboBox except hideTrigger needs to be hideTrigger2. I have not figured out how to solve this but no biggie.

/**
* Makes a ComboBox have a twin trigger that is used to clear the value from the field.
* User listener 'clear' to do something.
*
* @author Michael Giddens & help from Animal, jSakalos, Jack
* http://extjs.com/forum/showthread.php?p=76130
*
* @history 2007-10-21 jvs
* Combobox Mod for Ext 2.0
*/
Ext.ux.TwinComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent : Ext.form.TwinTriggerField.prototype.initComponent
, getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger
, initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger
, trigger1Class : 'x-form-clear-trigger'
, hideTrigger1 : true
// , onTrigger2Click : Ext.form.ComboBox.prototype.onTriggerClick // Not sure if needed ???
// , hideTrigger2: Ext.form.ComboBox.prototype.hideTrigger // Does not map hideTrigger ???

, reset : Ext.form.Field.prototype.reset.createSequence(function(){
this.triggers[0].hide();
})

, onViewClick : Ext.form.ComboBox.prototype.onViewClick.createSequence(function(){
this.triggers[0].show(); // Added to show trigger
})

, onTrigger2Click : function(){
this.onTriggerClick();
}

, onTrigger1Click : function(){
this.clearValue();
this.triggers[0].hide();
this.fireEvent('clear', this);
}

});



Related Thread: http://extjs.com/forum/showthread.php?t=15842

[sfwalter]

Its cool but after clicking the "x" and then calling this code:


Ext.getCmp("damageTypeCombo").getValue()


getValue() is still returning a value. Could it be because I'm using the hidden name property on the combo box?

[mdelanno]

Ext.ux.TwinComboBox does not support 1-dimensional array in store config. You should use this code to load your array :

var myTwinCB = new Ext.ux.TwinComboBox({
[..]
displayField: "text",
mode: "local",
store: new Ext.data.SimpleStore({
expandData: true,
fields: ['text'],
data: ["a", "b", "c", "d"]
}),
valueField: "text"
})