javascript - 导航 View 上的 Sencha Touch 2 动态按钮

Question

我正在尝试从另一个 View 动态地initialize() 和destroy() 导航 View 栏上的按钮。按钮创建得很好，但我无法删除它...也尝试过 hide()，但它被调用了两次并且没有帮助。所以我正式陷入困境，请帮忙! :-)

我的 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);
    }
});

我的导航 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'
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

我的数据 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

好吧，我终于明白了...问题出在导航 View 中的 autoDestroy: false!