如何在导航栏中添加感应器的后退按钮？

Question

在Innerdata.js中，我有一个a标记，在点击事件中，我将它导航到Group.js。

Gruop.js包含一些html.I，我尝试在这里添加带有后退按钮的导航栏。这里唯一的导航栏是“不显示后退”按钮。这就是我摔倒的地方，我不知道为什么后退按钮不显示。

我试图在Group.js页面的导航栏中添加Back按钮，所以当我单击这个按钮时，我导航到Inner.js page.so，这里有什么问题？

Inner.js:

Ext.define('chat.view.Inner', {
    extend: 'Ext.Panel',
    xtype:'Inner',
    config: {
        items: [
            {xtype:'Innerdata'}
        ]
    }
});

Innerdata.js:

Ext.define('chat.view.Innerdata',{
    extend:'Ext.Panel',
    xtype:'Innerdata',
    config: {
        items: [
            {
                html:'<a class="groupimg"><img src="stylesheets/images/groupchat.png"/></a>',
                listeners: [
                {
                    element: 'element',
                    delegate: 'a.groupimg',
                    event: 'tap',
                    fn: function() {
                        console.log('One!');
                        Ext.Viewport.setActiveItem(Ext.create('chat.view.Group'));
                    }
                }
                ]
            },
        ]
    }
});

Group.js:

Ext.define('chat.view.Group', {
    extend: 'Ext.navigation.View',
    //extend: 'Ext.Panel',
    xtype:'Group',

    config:{
        items: [
                {html:'<div>Hello Hello Hello Hello</div>'}
                    ]
    },
    onBackButtonTap:function(){
        this.callParent(arguments); 
    }

});    

这是Group.js页面的屏幕截图，我试图在蓝条中添加返回按钮。

​

Answer 1

我相信您的代码中存在对Ext.navigation.View的误用。请不要在你的情况下使用它。

下面是关于如何解决这个问题的一些解释和说明：

• Group.js说，如果一个视图是Ext.navigation.View的子类，它按照push/pop模式工作。请看这里的一个例子：http://docs-origin.sencha.com/touch/2.3.0/#!/api/Ext.navigation.View。这就是为什么您应用于Group.js的导航视图不应该在顶部和第一个屏幕上有一个后退按钮。
• 因此，在这种情况下没有理由使用导航视图。您只需要使用一个简单的Ext.Container来代替。因此，将Group.js的父类更改为Ext.Container。之后，在顶部添加工具栏，向其添加后退按钮，并绑定处理程序。

Ext.define('chat.view.Group'，{//扩展：‘Ext.导航.视图’，扩展：'Ext.Container'，xtype:'Group'，config:{ items：[{x xtype：‘工具栏’，停靠：'top'，条目：{x xtype：‘按钮’，文本：'Back'，ui：'back'，处理程序: function(){Ext.Viewport.setActiveItem(Ext.create('chat.view.Inner'))；}} {html:' Hello ' }，}；