I was wondering how to ovverride the back button on a navigation view. I tried using onBackButtonTap but it doesnt seem to work

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

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./#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();
                }
                }
            ]
        });

• javascript
• mobile
• extjs
• sencha-touch
• sencha-touch-2

• You fiddle doesn't run in browser (Chrome). Throws a syntax error. – MCL Commented Feb 13, 2013 at 18:27
• there's missing , after this line `padding:10' . – SachinGutte Commented Feb 13, 2013 at 18:34
• @phazorRise you are correct – ninjasense Commented Feb 13, 2013 at 18:52
• @MCL link and code updated – ninjasense Commented Feb 13, 2013 at 18:53

1 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 ponents. 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 ponent to behave in default way + the way to wanted it to behave. And if you want to pletely override the back button behavior you can remove this line. Try doing both ways.

To use this custom ponent, 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.