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

Question

In Innerdata.js , i have a a tag and on tap event i navigate it to the Group.js .

Gruop.js contain some html.I try to add here navigation bar with back button. Here the only Navigation bar is display no back button. Now this is where I fall down, I can't figure out why the Back button is not display.

I am trying to add Back button in navigation bar in Group.js page so when i click this button i navigate to the Inner.js page.so what is the problem here?

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

});    

here is the screen shot of Group.js page, i am trying to add Back button in Blue bar.

Answer 1

I believe there is a misuse of Ext.navigation.View in your code. Please don't use it in your situation.

Here are some explanations and instructions on how you can fix this problem:

• If a view, says Group.js , is a subclass of Ext.navigation.View , it works according to push/pop pattern. Please see an example here: http://docs-origin.sencha.com/touch/2.3.0/#!/api/Ext.navigation.View . That's why a navigatioin view, which you applied to Group.js , should never have a back button on the top and very first screen.

• So, there's no reason to use navigationview in this case. You just need to use a simple Ext.Container instead. So change your parent class of Group.js to Ext.Container . After that, add a toolbar on the top, add the back button to it and bind a handler.

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