activate/deactivate config listeners not firing in navigationview to hide navigationbar button in sencha touch 2

Question

I am attempting to do something which (at least I believe) should be very straightforward in ST2 but it is not working. I have a main view (xtype: navigationview) and a secondary view (xtype: container). There is a button in the navigationbar on the main view that should be hidden when navigating to the secondary view and shown when returning to the main view. I have added the code to mark the setHidden(true) in the main view config listeners but neither of the events fire.

Is there maybe a better way of doing this?

Main view:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'main',

    requires: [
        'Ext.dataview.List'
    ],

    config: {
        navigationBar: {
            items: [
                {
                    xtype: 'button',
                    iconCls: 'refresh',
                    iconMask: true,
                    itemId: 'refreshBtn',
                    align: 'left'
                }
            ]
        },
        items: [
            {
                xtype: 'button',
                itemId: 'next-page-button',
                text: 'Next Page'
            }
        ],

        listeners: {
            activate: function() {
                this.query('[itemId=refrehBtn]')[0].setHidden(false);
            },
            deactivate: function() {
                this.query('[itemId=refrehBtn]')[0].setHidden(true);
            }
        }
    },

    initialize: function() {
        this.callParent();
    }
});

Sencondary view:

Ext.define('MyApp.view.Main2', {
    extend: 'Ext.Container',
    xtype: 'main2',

    config: {
        items: [
            {
                xtype: 'panel',
                items: [
                    {
                        xtype: 'panel',
                        html: 'second view'
                    },
                ]
            }
        ]
    }
});

Controller:

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

    config: {
        refs: {
            nextPgBtn: '[itemId=next-page-button]'
        },

        control: {
            nextPgBtn: {
                tap: 'showNextPg'
            }
        }
    },

    showNextPg: function(btn, e, opts) {
        btn.up('navigationview').push({
            xtype: 'main2'
        });
    }
});

Answer 1

Firstly, you need to change your query to correctly retrieve your button. Change this:

this.query('[itemId=refrehBtn]')[0].setHidden(false);

to this:

Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(false);

Secondly, instead of using activate and deactivate event, you should make use of back

event which fires when the back button in the navigation view was tapped. and push event which fires when a view is pushed into this navigation view in order to show and hide your button accordingly:

back: function() {
    Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(false);
},

push: function() {
    Ext.ComponentQuery.query('#refreshBtn')[0].setHidden(true);
}

Here is a demo: http://www.senchafiddle.com/#GSt6x