CODEWITHSUNDEEP
javascriptsencha-touchsencha-touch-2
DS9
DS9

Reputation: 3033

how to add back button in navigation bar in sencha touch?

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. enter image description here

Upvotes: 1

Views: 2004

Answers (1)

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

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

});

Upvotes: 3

Related Questions