PDA

View Full Version : DateField onChange event only on lost focus?



al_capone
17 Aug 2007, 12:45 AM
I added Ext.form.DateField component into toolbar. When I click on DateField Trigger button and select DateValue from DatePicker, selected value is added into input field. This is OK. But
change event is called only after clicking outside Datefield. It is there event or other way how update my grid automatically when date value from DatePicker is added to DateField component? Thanks



var dateFrom = new Ext.form.DateField({
id: 'dateFrom',
width: 80,
value: todayDate,
selectOnFocus: false,
readOnly: true,
allowBlank: false
});
dateFrom.on('change', getFilteredValues);

function renderDate(value){
return value.dateFormat('d.m.Y');
}

function getFilteredValues() {
ds.on('beforeload', function() {
ds.baseParams = {
filterDateFrom: renderDate(dateFrom.getValue())
};
});
ds.load({params:{start:0, limit:myPageSize}});
}

ffzhuang
17 Aug 2007, 6:58 AM
Hi, al_capone:

I have the same problem. Jack had suggestion something like this:

Ext.form.DateField.prototype.menuListeners.show = function(){
this.onFocus();
}

However, this event only fired before date is pickup.

Anyone suggestion will be really appreciated.

Regards!

Fenqiang Zhuang

mrogers
20 Aug 2007, 9:14 PM
If you are trying to get the event of a user selecting a date on the calendar, this is the way:


Ext.form.DateField.prototype.menuListeners.hide = function(){
//do whatever here, like this.onBlur();
};

Use it with the .show event to see if the value has changed.

al_capone
21 Aug 2007, 2:41 AM
mrogers,

thanks your code works fine
when i was waiting for some answer to my question i coded something like this:
it looks like DateField component :)




var todayDate = new Date();
var fromDate = new Date();
var toDate = new Date();

var dateMenuFrom = new Ext.menu.DateMenu({
handler : function(dp, date){
if (date>toDate) {
Ext.Msg.alert('Bad date', 'Date "FROM" must be less than date "TO".');
} else {
fromDate = date;
buttonDateFrom.setText(renderDate(fromDate));
getFilteredValues();
}
}
});

var buttonDateFrom = new Ext.Toolbar.Button({
id: 'buttonDateFrom',
cls: 'x-btn-text-icon',
icon: iconPath + 'silk/icons/date_previous.png',
text: renderDate(todayDate),
menu: dateMenuFrom
});


var tb = new Ext.Toolbar(gridHead);
tb.addField(buttonDateFrom);

wck555
13 Oct 2007, 9:04 PM
This pointed me in the right direction but had a few minor problems: "hide" is called even when the user presses "ESC" to close the date picker without picking a date. In addition this solution replaces the original hide function in datefield which appears to have some important code in it. My solution is still a bit of a hack since it could be invalidated by a change in Ext. But for now it works.

Add this code to your project


Ext.form.DateField.prototype.menuListeners.select = function(m,d)
{
this.setValue(d); // write date user selected into the text box
this.fireEvent('dateselect'); // fire dateselect event
}


Then subscribe to the "dateselect" event of your datefield control(s) to receive notification when the user picks date:


myDateControl.on('dateselect', onChangeDate, this);



If you are trying to get the event of a user selecting a date on the calendar, this is the way:


Ext.form.DateField.prototype.menuListeners.hide = function(){
//do whatever here, like this.onBlur();
};

Use it with the .show event to see if the value has changed.

mickh
23 Aug 2009, 1:03 AM
I know this is an old thread, but I hit this problem today and realised what I was doing wrong, and so figured I'd report it here in case it helps others in the future.

So, I hit the problem that a DateField embedded in a toolbar was only firing the 'change' event when focus moved away from the DateField.

The solution was to use the 'select' event instead. It fires as soon as a date is selected. So, I now have:



new Ext.form.DateField({
readOnly: true,
listeners: {
'select' : {
fn: function(field, date) {
// ... do something useful here ...
}
}
}
});


cheers,
mick