To understand why and where Ext.override can be useful you can read this post which I liked most Ext.override – Monkey Patching Ext JS.
The problem that I’ve encountered is in closing all other menus when you click on Ext.form.DateField’s trigger button. Let’s see why it is happening. Here is the part of Ext.form.DateField (ExtJs 3.1.0) source which handles trigger button click.
/**
* @method onTriggerClick
* @hide
*/
// private
// Implements the default empty TriggerField.onTriggerClick function to display the DatePicker
onTriggerClick : function(){
if(this.disabled){
return;
}
if(this.menu == null){
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false
});
}
this.onFocus();
Ext.apply(this.menu.picker, {
minDate : this.minValue,
maxDate : this.maxValue,
disabledDatesRE : this.disabledDatesRE,
disabledDatesText : this.disabledDatesText,
disabledDays : this.disabledDays,
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
this.menu.picker.setValue(this.getValue() || new Date());
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
},
I want you to pay attention on lines 12-15. As you it is initializing Ext.menu.DateMenu element on DateField but we can’t pass him any extra config params. I needed only to add allowOtherMenus parameter to DateMenu, so I hadn’t thought too much and overrode the function. The problem is that you can’t access old function when you overriding it in JavaScript. One way of come over that problem is given in Ext.override – Monkey Patching Ext JS post. The other way which is better (easy-readable) for some cases is to create a functions sequence using function createSequence(). Here is a sample of using it given in ExtJS docs.
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
var sayGoodbye = sayHi.createSequence(function(name){
alert('Bye, ' + name);
});
sayGoodbye('Fred'); // both alerts show
Here is a solution for calling overridden function
Ext.override(Ext.form.DateField, {
onTriggerClick: function(){
if(this.disabled){
return;
}
if (!this.menu) {
this.menu = new Ext.menu.DateMenu({
hideOnClick: false,
focusOnSelect: false,
allowOtherMenus: this.allowOtherMenus
});
}
}.createSequence(Ext.form.DateField.prototype.onTriggerClick)
});
The result is that before calling Ext.form.DateField.prototype.onTriggerClick function my function works. As you see biggest drawback of this method is that you can’t call old function in the body of new function.