Sencha Touch 2: How to override back button on Navigation View

Question

I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work http://www.senchafiddle.com/#8zaXf

var view = Ext.Viewport.add({
            xtype: 'navigationview',
            onBackButtonTap: function () {
                alert('Back Button Pressed');
            },

            //we only give it one item by default, which will be the only item in the 'stack' when it loads
            items: [
                {
                    //items can have titles
                    title: 'Navigation View',
                    padding: 10,

                    //inside this first item we are going to add a button
                    items: [
                    {
                    xtype: 'button',
                    text: 'Push another view!',
                    handler: function() {
                    //when someone taps this button, it will push another view into stack
                    view.push({
                    //this one also has a title
                    title: 'Second View',
                    padding: 10,

                    //once again, this view has one button
                    items: [
                    {
                    xtype: 'button',
                    text: 'Pop this view!',
                    handler: function() {
                    //and when you press this button, it will pop the current view (this) out of the stack
                    view.pop();
                }
                }
            ]
        });

Answer 1

The fiddle you've mentioned works well in my local project on my machine. For some reason, it doesn't work on fiddle site. Try running it on your local project.

Still instead of using onBackButtonTap config, it's good to extend Ext.navigation.View class and override onBackButtonTap method. That way you'll have more control over whole components. You'd also like to override other configs as well. Here's what I'd use -

Ext.namespace('Ext.ux.so');

Ext.define('Ext.ux.so.CustomNav',{
    extend:'Ext.navigation.View',
    xtype:'customnav',
    config:{

    },
    onBackButtonTap:function(){
        this.callParent(arguments); 
        alert('back button pressed');
    }
});

the line this.callParent(arguments) will allow component to behave in default way + the way to wanted it to behave. And if you want to completely override the back button behavior you can remove this line. Try doing both ways.

To use this custom component, you can use -

launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();


        var view = Ext.create('Ext.ux.so.CustomNav', {
            fullscreen: true,

            items: [{
                title: 'First',
                items: [{
                    xtype: 'button',
                    text: 'Push a new view!',
                    handler: function() {
                        //use the push() method to push another view. It works much like
                        //add() or setActiveItem(). it accepts a view instance, or you can give it
                        //a view config.
                        view.push({
                            title: 'Second',
                            html: 'Second view!'
                        });
                    }
                }]
            }]
        });

    }

Give this a shot. It'll work for you yoo.