Sencha Touch : How to attach event listeners for DatePicker field

Today, we are going to see, how can we attach event listeners for DatePicker field in Sencha Touch 2. First lets create FormPanel Component and add DatePicker field. Here is the code

Ext.define('MyApp.view.FormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.formpanel',

    config: {

        items: [{
            xtype: 'datepickerfield',
            itemId: 'datepickerfield',
            label: 'Select Date',
            placeHolder: 'mm/dd/yyyy',
            picker: {
                useTitles: true,
                slotOrder: [
                    'day',
                    'month',
                    'year'
                ]
            }
        }]
    }
});

Next, we are going to attach event name 'change' to the above DatePicker field in the controller class. Using control configuration, we are attaching change event to the FormPanel component having itemId value as 'datepickerfield'.  Also, we attach a method onDatepickerfieldChange that will be called once the change event is triggeed. Here is the code

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    config: {

        control: {
            "datepickerfield[itemId=datepickerfield]": {
                change: 'onDatepickerfieldChange'
            }
        }
    },
    onDatepickerfieldChange: function (datepickerfield, newDate, oldDate, eOpts)    {
        console.log('Change event trigged');
    }
});

Hope, you enjoyed this Post.