on change event datepicker in Ext.form.DateField not working - extjs

Question

I have html span for datepicker like this
<span id="spanLimitFBClaim"></span>
then i call it's first.js
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate")
datepicker comes form another global.js
$.fn.datepicker = function (id) {
var mydate = new Ext.form.DateField({
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(this).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date()
});
$("#" + id).attr("readonly", true);
}
it is works. the problem is. i want to get change event. i try to add in global.js the listener like this
$.fn.datepicker = function (id) {
var mydate = new Ext.form.DateField({
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(this).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date(),
listeners: {
select: function () {
console.log('Date selected: ', this.getValue());
}
}
});
$("#" + id).attr("readonly", true);
}
and it works. i see the value on global.js (console.log) the problem is how to add it in my span (from the first.js). because i do below code is not working
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate", {
listeners: {
select: function () {
console.log('Date selected: ', this.getValue());
}
}
});
i'm very newbie in ext.js, seems i was typo in using it :(
Many thanks

Answer 1

In the first version, you set the listener in the config of the field you create in the function.
In the second version, you set the listener as the second argument to said function, but that function only takes one argument. So the config you set there is omitted.
It should work if you change your function like this:
$.fn.datepicker = function (id,config) {
var me=this;
var mydate = new Ext.form.DateField(
Ext.apply(config,{
xtype: 'datepicker',
format: 'd-M-Y',
margin: '2 0 2 0',
renderTo: Ext.get($(me).attr("id")),
cls: 'sa-datepicker',
inputId: id,
value: new Date()
});
);
$("#" + id).attr("readonly", true);
}
and then call
$("#spanLimitPaymentDate").datepicker("LimitPaymentDate", {
listeners: {
select: function (picker) {
console.log('Date selected: ', picker.getValue());
}
}
});