Google analytics code

Thursday, July 18, 2013

Sencha Touch: Using the Action property of the Button element

I've been trying to wire up the buttons in my UI to handlers inside the view so I could have them fire an event to the controller and complete an action, but it required me to put a function in the config section and it looks messy and isn't portable.

After much googling I found a hidden property of Button called action. I can't find very good documentation on it and wanted to show an example of it because it will make your life so much easier.


// Building a button inside of an items array
{
    xtype: 'button',
    action: 'warnOnLeave',
    align: 'left',
    iconCls: 'home',
    ui: 'back',
}

// Handle the button click inside a controller
control: {
    // Listen for the new button press
    'button[action=warnOnLeave]':{
        tap: 'onCreateNewContent'
    }
}

This saved me quite a few steps because all my button actions triggered something in the controller. This way I can skip using fireEvent and just tie the event to a handler method in the controller.

No comments:

Post a Comment

If you found this page useful, or you have any feedback, please leave a comment.