Clearable ExtJs Combobox

15/10/2008

Добавление параметра "clearable" (сбросить combobox, отменить выбор значения в combobox) в Ext.form.Combobox.

Теперь все объекты типа Combobox имеют этот параметр, а также все виджеты унаследованные от Ext.form.Combobox будут иметь этот параметр.

Ext.override(Ext.form.ComboBox, {
  
  clearable:      false,
  
  initComponent: Ext.form.ComboBox.prototype.initComponent.createInterceptor(function() {
    
    if (!this.clearable) {
      // if not clerable, call native initComponent
      return true;
    }
    
    Ext.apply(this, {
      // workaround (TwinTriggerField is not visible in tab/card panels, rendering problem)
      // @see: http://extjs.com/forum/showthread.php?t=17242
      anchor:        '-10',
 
      getTrigger:    Ext.form.TwinTriggerField.prototype.getTrigger,
      initTrigger:   Ext.form.TwinTriggerField.prototype.initTrigger,    
      trigger1Class: 'x-form-clear-trigger',    
      hideTrigger1:  true,
 
      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.form.TwinTriggerField.prototype.initComponent.apply(this, arguments);
    return false; // do not call native initComponent
  })
});
Пример использования:
SampleCombo = Ext.extend(Ext.form.ComboBox, {
  editable:       false,
  typeAhead:      false,    
  forceSelection: true, 
  mode:           'remote', 
  triggerAction:  'all',
  selectOnFocus:  true, 
 
  store:   new Ext.data.JsonStore({...})
});
 
Ext.reg('samplecombo', SampleCombo);
 
Ext.onReady(function(){
  var form = new Ext.form.FormPanel({
    items: [{
      xtype:     'combo',
      clearable: true,
      .....
    }, {
      xtype:     'samplecombo',
      clearable: true,
      .....
    }]
  });
});

Оставить комментарий

BlogMemes.ru