[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"
})

[KRavEN]

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]

initComponent : Ext.form.TwinTriggerField.prototype.initComponent.createSequence(function() {
Ext.form.ComboBox.prototype.initComponent.call(this);
})