DatField event for picker click

[aresot]

I did not find any event for DatField object's case when user clicks on DatPicker icon and selects new date. Is there way to catch that event?

Thanks.

[evant]

http://extjs.com/deploy/ext/docs/output/Ext.form.DateField.html#onTriggerClick

[aresot]

Thank you. Wow. I wasn't even looking at functions. Never suspected Ext has callbacks when it has events already in place. Was there specific purpose of placing some of event processing into events and some into callbacks?

Cheerz.

[evant]

It's because trigger field is meant to be overridden (date field, combo field), so it provides the ability to override it in a subclass.

[aresot]

Sorry I didn't explain my problem exactly. After looking at doc this is not exactly what I was looking for. I don't really need event when user clicks on the icon to open DatePicker itself. I need an event or callback when user selects new date in the DatePicker.

[evant]

http://extjs.com/deploy/ext/docs/output/Ext.DatePicker.html#event-select

You can use this event on the DateField, because all DateField events will be applied to the DatePicker object.

[aresot]

Hmm, tried it but not receiving any event. Here is my code:


function InitTree() {
....
var dp_from = new Ext.form.DateField({
id:'tree2_date_from',
width:100,
validateOnBlur:true,
value: new Date(),
allowBlank:false
});
dp_from.on('select', OnSelectDate);
dp_from.render("div_tree2_date_from");
.....
}
function OnSelectDate () {
alert(123)
}

[aresot]

Well, here is how I "fixed" it. Looks ugly but it works:


dp_from._old_onTriggerClick = dp_from.onTriggerClick;
dp_from.onTriggerClick = function() {
var doset = (this.menu == null);
this._old_onTriggerClick();
if (doset && this.menu != null) {
this.menu.on({
'select': function(m, d){
this.setValue(d);
alert("Place my code here")
},
scope: this
});
}
}

[smo0f]

Hi. Thanks for the post. This is confirmed to work in 2.0


Well, here is how I "fixed" it. Looks ugly but it works:


dp_from._old_onTriggerClick = dp_from.onTriggerClick;
dp_from.onTriggerClick = function() {
var doset = (this.menu == null);
this._old_onTriggerClick();
if (doset && this.menu != null) {
this.menu.on({
'select': function(m, d){
this.setValue(d);
alert("Place my code here")
},
scope: this
});
}
}

[ferr]

This is what I do:

Ext.form.DateField.prototype.menuListeners.hide = function(){
this.addEvents('click');
this.fireEvent('click');
};

myDateField.on('click', function() { Ext.MessageBox.alert('hi'); });
myOtherDateField.on('click', function() { Ext.MessageBox.alert('hey'); });

I wonder, is adding an event like this inefficient, could it be done better? This is pretty elegant, at least.

[andersto]

I changed it to a class so that I won't change all date fields and it's a little more fitting with "ext style". Now you just need to replace the alert with some sort of event handler that is defined by the owner if the instance.




Ext.ux.DateFieldEx = function() {
Ext.ux.DateFieldEx.superclass.constructor.call(this);

}

Ext.extend(Ext.ux.DateFieldEx, Ext.form.DateField, {
onTriggerClick : function() {
var doset = (this.menu == null);
Ext.ux.DateFieldEx.superclass.onTriggerClick.call(this);
if (doset && this.menu != null) {
this.menu.on({
'select': function(m, d){
this.setValue(d);

alert("Place my code here")
},
scope: this
});
}
}
});

[wm003]

Seems to be a needed feature request for the Ext-Core

[fermo111]

This is for Ext 2.x:


Ext.ux.DateFieldEx = Ext.extend(Ext.form.DateField, {

initComponent: function () {
Ext.ux.DateFieldEx.superclass.initComponent.call(this);

this.addEvents(
'select'
);

this.menuListeners.select = function (m, d) {
if (this.fireEvent("select", this, d) !== false)
this.setValue(d);
};
}
});