Events 激活/停用navigationview中未触发的配置侦听器以隐藏sencha touch 2中的navigationbar按钮

我正在尝试做一些（至少我相信）在ST2中应该非常简单的事情，但它不起作用。我有一个主视图（

xtype:navigationview

）和一个辅助视图（

xtype:container

）。主视图上的导航栏中有一个按钮，导航到次视图时应隐藏该按钮，返回主视图时应显示该按钮。我添加了代码来标记主视图配置侦听器中的

setHidden（true）

，但两个事件都没有触发

有没有更好的方法

主要观点：

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

第二种观点：

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

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

控制器：

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

---

首先，您需要更改查询以正确检索按钮。更改此项：

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

为此：

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

其次，不要使用

activate

和

deactivate

事件，而应该使用

点击导航视图中的后退按钮时触发的事件。和将视图推入此导航视图时触发的事件，以便相应地显示和隐藏按钮：

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

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

下面是一个演示：