Question

I’ve been researching on how to reference methods of a button using MVC on Sencha Touch, but none of the articles has worked fine for me since I declare all my controls on the constructor of my views.

Here is an example of my code:

Ext.define('TPTMOBILE.view.Login',{
    extend: 'Ext.Panel',
    ...
    config: {
        ...
    },

    constructor: function(){
        var submitButton = Ext.create('Ext.Button', {
            text: 'Login'
        });
    }

});

So I’d like to know how to reference the onTap method of my ‘submiButton’ button.

Thanks in advance.

Answer 1

Your constructor method will not working, try this instead:

constructor: function(config){
    this.callParent(config);
    this.add(
        {
            xtype: "button",
            text: 'Login',
            action: 'doTap'
        }
    );
}

Your constructor method must contain a call to callParent in order to pass the config object to the parent constructor otherwise it won’t work.

After that, you have several ways to achieve your onTap method on the button but since you want to use MVC on Sencha Touch so you can set an action for the button

action: 'doTap'

Then in your controller you can do as following to run your code when tapping on that button:

refs: {
    doTap: 'button[action=doTap]'
},

control: {
    doTap: {
        tap: 'doTap'
    },
},

doTap: function() {
    alert('doTap function activvated');
}

Hope it helps 🙂