Nullable ComboBox [Archive]

anton.dutov

31 Oct 2009, 2:53 AM

Extends Ext.form.ComboBox
Adds new attribute called 'nullable'
And two events 'clear' (fires when value cleared) and 'change' (fires when value changed)
if nullable is set to true and some value selected - shows button to clear value
Event 'change' like event 'select' but no have arguments and fires even when value is cleared

Ext.override(Ext.form.ComboBox, {
nullable:false
,initComponent: Ext.form.ComboBox.prototype.initComponent.createSequence(function(){
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls:'x-form-trigger '},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls:'x-form-trigger x-form-clear-trigger'}
]};
this.addEvents(
'clear',
'change'
);
this.on('select', function(){
this.nullable && this.trigger_clear.show();
this.fireEvent('change', this);
});
})
,clearValue:Ext.form.ComboBox.prototype.clearValue.createSequence(function(){
if(this.trigger_clear){
this.trigger_clear.hide();
}
this.fireEvent('clear', this);
this.fireEvent('change', this);
})
,onRender:Ext.form.ComboBox.prototype.onRender.createSequence(function(ct, position){
var self = this;
var triggers = this.trigger.select('.x-form-trigger', true).elements;
for(var i;i<triggers.length;i++){
triggers[i].addClassOnOver('x-form-trigger-over');
triggers[i].addClassOnOver('x-form-trigger-over');
}
this.trigger_clear = triggers[1];
this.trigger_clear.hide = function(){
var w = self.wrap.getWidth();
this.dom.style.display = 'none';
self.el.setWidth(w-self.trigger.getWidth());
};
this.trigger_clear.show = function(){
var w = self.wrap.getWidth();
this.dom.style.display = '';
self.el.setWidth(w-self.trigger.getWidth());
};
this.mon(this.trigger_clear, 'click', this.clearValue, this, {stopPropagation:true});
if(!this.getValue())
this.trigger_clear.hide();
})
,onDestroy : Ext.form.ComboBox.prototype.onDestroy.createInterceptor(function() {
Ext.destroy(this.triggers);
return [];
})
});