Sencha Touch timetable i.e., adding of an Event Listener

Sencha Touch timetable i.e., adding of an Event Listener

Sencha Touch Calendar are plug ins that enable you to add calendars to your Sencha Touch applications. An example code would be:           

Ext.define('XXX.view.NavigViewTimetable', {

        extend: 'Ext.navigation.View',

        alias: 'widget.navigviewtimetable',

        requires: [

        'XXX.view.TimetableContainer',

        'XXX.view.DetailView',

        'XXX.view.TimetableEdit',

        'XXX.view.TimetableDayList'

        ],

        config: {     

            navigationBar: {

                items: [

                    {

                        xtype: 'button',

                        text: 'Add',

                        itemId: 'addButton',

                        ui: 'custom-btn-up-timetable',

                        align: 'right',

                        hidden: false

                    },

                ],

                ui: 'custom-toolbar-top-1L'

            },

            items: [

                {

                    xtype: 'timetablecontainer'

                },

                //Toolbar

                {

                    xtype: "toolbar",

                    docked: "bottom",

                    ui: 'custom-toolbar-2L',

                    items: [

                        {

                            xtype: "button",

                            text: 'Today',

                            ui: 'custom-btn-dwn-timetable',

                            //handler: this.onTodayButtonTap,

                            //scope: this,

                            itemId: 'todayButton'

                        },

                        {

                            xtype: 'spacer'

                        },

                        {

                            xtype: "segmentedbutton",

                            items: [

                            {

                                text: 'Daily',

                                ui: 'custom-btn-dwn-timetable'     

                            },

                            {

                                text: 'List',

                                ui: 'custom-btn-dwn-timetable',

                                //disabled: true,

                                pressed: true      

                            }

                            ],

                            itemId: 'segBtn',  

                            align: 'right'

                        }

                    ]

                }

            ],

            listeners: [

                {

                    delegate: '#addButton',

                    event: 'tap',

                    fn: 'onAddButtonTap'

                },

                {

                    delegate: '#todayButton',

                    event: 'tap',

                    fn: 'onTodayButtonTap'

                },

                {

                    delegate: '#segBtn',

                    event: 'toggle',

                    fn: 'onSegBtnToggle'

                }

            ],

            // I NEED ADD LISTEN TO AN EVENT HERE

            title: 'Timetable XXX',

            iconMask: true,

            iconCls: 'XXX-icon-timetable'

        },

        onAddButtonTap: function () {

            console.log("addItemCommand [NavigViewTimetable]");

            this.fireEvent("addItemCommand", this);

        },

        onTodayButtonTap: function(){

            console.log('onTodayButtonTap [NavigViewTimetable]');

            this.fireEvent('todayButtonTapCommand', this)

        },

        onSegBtnToggle: function (segBtn, btn, isPressed) {

            //console.log("'" + btn.config.text +"' on segmented button pressed" );

            if (btn.config.text == 'List'){

                this.fireEvent('listToggleCommand', this);

            }else if (btn.config.text == 'Daily'){

                this.fireEvent('dailyToggleCommand', this);

            }                        

        }

    });

However, I would instead recommend using Controllers than putting codes. The advantage being that with Controllers, you are able to avoid the continuous maintenance of updating the codes. Another advantage is you will be able to use action configs for the buttons. For example:

xtype: 'button',

                    text: 'Add',

                    itemId: 'addButton',

                    ui: 'custom-btn-up-timetable',

                    align: 'right',

                    hidden: false,

                    action:'addButtonAction'

Also, control config option can be utilized such as:

                    Ext.define('XXX.controller.ButtonController',{

     extend:'Ext.app.Controller',

     config:{

          refs:{

               views:['Theviews.youwanto.refer'],

               //addtional references 

          },

          control:{

               'button[action=addButtonAction]':{

                     tap:'functionForAddButton'

                }

          }       

     },

     functionForAddButton:function(){

          console.log('Add Button tapped');

     }

);