Question

在Innerdata.js中，我有一个a标记，在点按活动时我会将其导航到Group.js。

Gruop.js包含一些html。我尝试在这里添加带后退按钮的导航栏。这里唯一的导航栏显示没有后退按钮。现在这是我摔倒的地方，我无法弄清楚为什么不显示“后退”按钮。

我正在尝试在Group.js页面的导航栏中添加“返回”按钮，所以当我点击此按钮时，我会导航到Inner.js页面。这里有什么问题？

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页面的屏幕截图，我正在尝试在蓝色栏中添加“后退”按钮。 enter image description here

Answer 1

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

以下是有关如何解决此问题的一些解释和说明：

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

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

  config:{
     items: [
        {xtype: 'toolbar', 
        docked: 'top', 
        items: [
          {xtype: 'button', 
          text: 'Back',
          ui: 'back',
          handler: function(){Ext.Viewport.setActiveItem(Ext.create('chat.view.Inner'));}}
        ]}
        {html:'<div>Hello Hello Hello Hello</div>'}
     ]
  },

});

如何在sencha touch中添加导航栏中的后退按钮？

1 个答案: