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

Asked By 0 points N/A Posted on -
qa-featured

Hello Techyv Guys,

I need a small support from Techyv Experts, Please do the needful for letting me know about Sencha Touch timetable i.e., adding of an Event Listener. Please do the needful for explaining me along with a sample coding for a better understanding.

Thanks and Regards,

Neil Rabon

SHARE
Answered By 0 points N/A #181837

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

qa-featured

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');

     }

);

 

Related Questions