PDA

View Full Version : Nullable ComboBox



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 [];
})
});

Animal
31 Oct 2009, 4:53 AM
The TwinTriggerCombo will allow this very simply.

http://www.google.com/cse?cx=001733999371871106761:jgc8jk2xgwe&ie=UTF-8&q=TwinTriggerCombo&sa=Search