Handle tapStart Event on a button

Question

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

Answer 1

You can try using touchstart which can be bound to any element including button

Answer 2

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