Question

Problem:

I switch Panels using setActiveItem() according to question-answer on this link

App.views.viewport.getActiveItem().setActiveItem(App.views.Panel, { type: 'slide', direction: 'left' });

Everything works fine, but how can I access my back button?

I suspect that theres only 1 back button, and I have to change his properties (text, handler).
How Can I do that?

Thank you, Shlomi.

P.S- when thinking about it, I have to modify all the bar properties – its title as well.

Answer 1

I will try to answer this question referencing the previous question about panels.

First add a back button to your panel’s top bar.

initComponent: function () {
      Ext.apply(this, {
       dockedItems: [{
            xtype: "toolbar",
            title: "Ingressos",
            items:[{
                 xtype: 'button',
                 text: 'Back',
                 handler: function () {

                 }
            }]
       }],
       items: [Mobz.views.IngressosList]
    });
   Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}

After that when user goes to next page, access the back button and change it’s handler(I won’t prefer to change handler, I prefer build a stack mechanism to go bacward but it is your choice 🙂 ).

Mobz.views.viewport.getActiveItem() //panel

Mobz.views.viewport.getActiveItem().dockedItems.items[0] // toolbar

You are seeking back button;

Mobz.views.viewport.getActiveItem().dockedItems.items[0].items.items[0] // back button

Mobz.views.viewport.getActiveItem().dockedItems.items[0].title // toolbars title