Sencha Touch 2 dynamic button on Navigation View

Question

I'm trying to initialize() and destroy() dynamically a button on Navigation View's bar from another view. Button is created fine, but I can't remove it... Tried also hide(), but it's being called twice and isn't helpful. So I'm officially stuck, please help! :-)

My Controller:

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

    config: {
        refs: {
            buttonNew1: '#btn-new1',
            buttonNew2: '#btn-new2',
            buttonNew3: '#btn-new3',
            buttonNew4: '#btn-new4',
            buttonDataNew: '#btn-data-new'
        },

        control: {
            buttonNew1: { tap: 'onNewButtonTap' },
            buttonNew2: { tap: 'onNewButtonTap' },
            buttonNew3: { tap: 'onNewButtonTap' },
            buttonNew4: { tap: 'onNewButtonTap' },
            buttonDataNew: { tap: 'onDataNewButtonTap' },
        }
    },

    onNewButtonTap: function(button) {
        console.log(button);
    },

    onDataNewButtonTap: function(button) {
        console.log(button);
    }
});

My Navigation View:

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

    config: {
        autoDestroy: false,

        items: [
            {
                xtype: 'container',
                layout : { type: 'vbox', pack: 'top', align: 'middle' },

                items: [
                    {
                        xtype: 'container',
                        layout: 'hbox',

                        items: [
                            {
                                xtype: 'button',
                                id: 'btn-new1',
                                text: 'New1'
                            },
                            {
                                xtype: 'button',
                                id: 'btn-new2',
                                text: 'New2'
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: 'hbox',

                        items: [
                            {
                                xtype: 'button',
                                id: 'btn-new3',
                                text: 'New3'
                            },
                            {
                                xtype: 'button',
                                id: 'btn-new4',
                                text: 'New4'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

My Data View:

Ext.define("MyApp.view.Data", {
    extend: 'Ext.dataview.DataView',
    xtype: 'view-data',

    config: {
        useComponents: true,
        layout: { type: 'fit', align: 'center' },
        defaultType: 'view-data-item',
        store: 'MyStore'
    },

    initialize: function() {
        this.callParent();
        Ext.Viewport.getActiveItem().getNavigationBar().add(Ext.create('Ext.Button', {
            id: 'btn-data-new',
            ui: 'normal',
            iconCls: 'add1',
            align: 'right',
            iconMask: true,
            hideAnimation: Ext.os.is.Android
                ? false : { type: 'fadeOut', duration: 200 },
            showAnimation: Ext.os.is.Android
                ? false : { type: 'fadeIn', duration: 200 }
        }));
    },

    destroy: function() {
        this.callParent();
        var button = Ext.getCmp('btn-data-new');
        if (button) {
            Ext.Viewport.getActiveItem().getNavigationBar().remove(button);
        }
    }
});

Answer 1

Well, I figured it out finally... The problem was with autoDestroy: false in the Navigation View!