Search code examples
eventsextjssencha-touchsencha-touch-2tap

Handle tapStart Event on a button


I have an app with a carousel. On all of the carousel pages there are elements such as buttons and datepickers. I would like to handle the tapStart event on each of these elements using Sencha Touch but I haven't been able to find anything to allow me to do this.

Does anyone have an idea?

UPDATE

I asked this question on the Sencha Forums as well. Here is the link to the Sencha Forum thread: http://www.sencha.com/forum/showthread.php?262804-Handle-tapStart-Event-on-a-button&p=963782#post963782


Solution

  • I figured out a solution to my problem with help from the Sencha Touch Forums.

    First I used the initConfig function to initialize my configuration of my container.

    Ext.define('MyApp.view.ViewName', {
        ...
        // Very Important, this is what I use in the controller to handle the events
        xtype: 'myxtype', 
        ...
        initConfig: function () {
            var me = this;
            this.config = {
                ...
                items: {
                    ...
                    {
                        xtype: 'button',
                        ...
                        listeners: {
                            element: 'element',
    
                            // This is where my code handles the tapstart
                            // (touchstart) event
                            touchstart: function () {
                                // Fire an event on the controller (me)
                                me.fireEvent('buttondown');
                            }
                        }
                    },
                    ...
                }
            }
            this.callParent([this.config]); // Very Important when using initConfig
        }
    });
    

    Then, in my controller I added this code:

    Ext.define('MyApp.controller.MainController', {
        ...
        config: {
            views: [
                'ViewName',
                ...
            ],
            ...
        },
        ...
        init: function () {
            this.control({
                'myxtype': {
                    buttondown: this.myFunction
                }
            })
        },
    
        myFunction: function () {
            // Do something
        }
    });