导航视图上的 Sencha Touch 2 动态按钮

Posted 2023-02-25

【中文标题】导航视图上的 Sencha Touch 2 动态按钮

【英文标题】：Sencha Touch 2 dynamic button on Navigation View

【发布时间】：2012-09-24 00:54:47

【问题描述】：

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

我的控制者：

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);
    
);

我的导航视图：

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'
                            
                        ]
                    
                ]
            
        ]
    
);

我的数据视图：

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);
        
    
);

【参考方案1】：

好吧，我终于想通了……问题出在导航视图中的autoDestroy: false！

【讨论】：

感谢此代码。你让showAnimation 和hideAnimation 工作了吗？我的好像不行。