events - 激活/停用未在导航视图中触发的配置侦听器以隐藏 sencha touch 2 中的导航栏按钮

Question

我正在尝试做一些（至少我相信）在 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'
        });
    }
});

Answer 1

首先，您需要更改查询以正确检索您的按钮。改变这个：

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

对此：

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

其次，不要使用activateand deactivateevent，而应该使用back

事件fires when the back button in the navigation view was tapped.和推送事件，fires when a view is pushed into this navigation view以便相应地显示和隐藏您的按钮：

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

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

这是一个演示：http ://www.senchafiddle.com/#GSt6x