PDA

View Full Version : [2.0] Ext.ux.TwinComboBox to Clear Field



mikegiddens
22 Oct 2007, 11:25 AM
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
8 Nov 2007, 8:10 AM
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
21 Aug 2008, 3:51 AM
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"
})

KRavEN
18 Mar 2010, 5:36 AM
Here's an Extjs 3.x version that also resolved the array store issue:


Ext.namespace('Ext.ux.form');
Ext.ux.form.TwinComboBox = Ext.extend(Ext.form.ComboBox, {
getTrigger : Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger : Ext.form.TwinTriggerField.prototype.initTrigger,
trigger1Class : 'x-form-clear-trigger',
hideTrigger1 : true,

initComponent : function() {
Ext.ux.form.TwinComboBox.superclass.initComponent.call(this);

this.triggerConfig = {
tag : 'span',
cls : 'x-form-twin-triggers',
cn : [{
tag : 'img',
src : Ext.BLANK_IMAGE_URL,
cls : 'x-form-trigger ' + this.trigger1Class
}, {
tag : 'img',
src : Ext.BLANK_IMAGE_URL,
cls : 'x-form-trigger ' + this.trigger2Class
}]
};
},

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

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

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

onTrigger1Click : function() {
this.clearValue();
this.triggers[0].hide();
this.fireEvent('clear', this);
}
});
Ext.ComponentMgr.registerType('twincombo', Ext.ux.form.TwinComboBox);

inelation
13 May 2012, 8:40 AM
initComponent : Ext.form.TwinTriggerField.prototype.initComponent.createSequence(function() {
Ext.form.ComboBox.prototype.initComponent.call(this);
})