Create A Simple MVC Button Click Listener in SenchaTouch2

 

I do not even want to admit how much time I spent today in a more complex application trying to get a button to respond to a tap event in SenchaTouch 2.0 Beta.  I did notice several people like me on the forums with similar issues, but I did not find one concrete example that made the simple “click a button application”.  Of course I’m building this in Microsoft Visual Studio 2010 and debugging with Chrome.  Let me start at the end.  When you are done, you will have a simple two button page that you can click on either button and have your MVC controller react to either button as well as trap the button hit inside the actual Panel.

 

image

 

And for those of you that have read enough, here is the source:  

 

 

The Nitty Gritty

Creating an SenchaTouch project with MVC is a little tricky to setup.  You need to get all the directories right.  My favorite way to do this is to use the Sencha Designer to create the project, then abandon it if I want to strike out on my own.  That is what I’ve done here.  I don’t even think you can tell.

Here is the file layout as seen from Visual Studio:

image

5 Files and 3 directories.

Let’s first take a look at the Panel that contains the buttons.  Here is the code:

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',
    config: {
        items: [
            {
                xtype: 'button',
                itemId: 'mybutton1',
                text: 'MyButton1',
                action: 'b1'
            },
            {
                xtype: 'button',
                itemId: 'mybutton2',
                text: 'MyButton2',
                action: 'b2'
            }
        ],

        listeners: [
            {
                fn: 'onMybutton1Tap',
                event: 'tap',
                delegate: '#mybutton1'
            }
        ]
    },
    onMybutton1Tap: function (button, e, options) {
        console.log('tap from mybutton1');
    }
});

Just a couple things to notice.  1) I’m defining an itemId which we will only be using in the local event (onMybutton1Tap).  If you notice the listener has a property delegate which looks for that.  I’m not sure if this is the best way to do this.  I’ve notice several forum people saying use the “on” syntax.  I did not find an example of that so this is what we have and it works.  Also notice the action property.  If you try and look that up on the SenchaTouch doc’s you will not find it.  I just made it up out of thin air (really!, well, I followed others examples).  I actually asked about this in the forums and I was told that is OK.  As a type safe language guy, it hurts, but I did it.

 

That’s it for the view.  Let’s move over to the controller.  Here is the source for that:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    views: [
        'MyPanel'
    ],

    refs: [
        {
            ref: 'MyPanel',
            selector: 'mypanel'
        }],

    init: function () {

        this.control({
            'button[action=b1]': {
                tap: this.onButtonTap1
            },
            'button[action=b2]': {
                tap: this.onButtonTap2
            }
        });
    },

    onLaunch: function () {
        console.log('onLaunch');
    },

    onButtonTap1: function () {
        console.log('controller: onButtonTap1');
    },

    onButtonTap2: function () {
        console.log('controller: onButtonTap2');
    },

    config: {

    }
});

Basically, what this is doing is filtering all buttons, then looking at just the buttons that have an action of b1 or b2.  If this was a large application, we’d probably want to do some more fancy component querying, but for now, this is OK.  If you keep your controllers small, this should always work.

 

That’s it for now.  Download the source and run it.  I hope it saves you a ton of time. 

As always any experts want to comment and improve or correct what I’ve done, please feel free to comment. 

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP for the past 7 years. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. Seriously we need some simple examples. You are right. I have spent hours trying to figure out how to make a button click! Seriously? We need some simple examples before we learn the kitchen sink with MVC.

Your Comments

*

Protected with IP Blacklist CloudIP Blacklist Cloud

Follow

Get every new post delivered to your Inbox

Join other followers: