激活/停用未在导航视图中触发的配置侦听器，以隐藏sencha touch 2中的导航栏按钮(activate/deactivate config listeners not firing in nav

激活/停用未在导航视图中触发的配置侦听器，以隐藏sencha touch 2中的导航栏按钮(activate/deactivate config listeners not firing in navigationview to hide navigationbar button in sencha touch 2)

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

I am attempting to do something which (at least I believe) should be very straightforward in ST2 but it is not working. I have a main view (xtype: navigationview) and a secondary view (xtype: container). There is a button in the navigationbar on the main view that should be hidden when navigating to the secondary view and shown when returning to the main view. I have added the code to mark the setHidden(true) in the main view config listeners but neither of the events fire.

Is there maybe a better way of doing this?

Main view:

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

Sencondary view:

Ext.define('MyApp.view.Main2', { extend: 'Ext.Container', xtype: 'main2', config: { items: [ { xtype: 'panel', items: [ { xtype: 'panel', html: 'second view' }, ] } ] } });

Controller:

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

其次，您应该使用back而不是使用activate和deactivate事件

fires when the back button in the navigation view was tapped.事件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

Firstly, you need to change your query to correctly retrieve your button. Change this:

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

to this:

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

Secondly, instead of using activate and deactivate event, you should make use of back

event which fires when the back button in the navigation view was tapped. and push event which fires when a view is pushed into this navigation view in order to show and hide your button accordingly:

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

Here is a demo: http://www.senchafiddle.com/#GSt6x