How to modify navigation bar (add/remove buttons on the right) from the child view?

[szimek]

Currently I'm handling "back" button without using navigation view and every view has its own custom titlebar defined in its own config. However, now I need to add more items on the view stack and wanted to use navigation view to handle it for me.

The issue is that every child view has different buttons on the right side of the titlebar (plus title and the default "back" button on the left).

How to modify navigation bar of the navigation view from its child view? I tried doing it in initialize function of the child view using this.up(), but it looks like child views are initialized before navigation view, so this.up() returns undefined. Is there a way to "reset" navigation view to its default state, so that my views won't have to know what kind of buttons were added by other views and what to remove?

[eastlander]

What if you try to use this.up() in the activate/show event of the child view instead of initialize?

[george.m]

You can add buttons to it using the code below. If you want to clear it, just do something like a removeAll() after the .getDockedItems()[0] maybe?

Ext.ComponentQuery.query(..navigation selector..)[0].getDockedItems()[0].add({ xtype: 'button', align: 'right', text: 'test' })

[szimek]

Thanks!

This works:

    onShow: function (view, eOpts) {
        var navigationView = this.up(),
            navigationBar = navigationView.getNavigationBar();


        navigationBar.add({
            iconCls: "refresh",
            iconMask: true,
            align: "right",
            itemId: "refresh"
        });


        navigationBar.add({
            iconCls: "delete",
            iconMask: true,
            align: "right",
            itemId: "logout"
        });
    },

getDockedItems() returns an empty array for me and it looks like removeAll removes all buttons including back button.

I'll probably add a way to set navigation bar buttons via child view config and in the worst case add new method on my navigation view to reset navigation bar.

The only thing that sucks is that listeners for these buttons defined in child views are still defined in navigation view, as I'm using something like this to handle them:

    config: {
        listeners: [
            {
                delegate: "#logout",
                event: "tap",
                fn: "onLogoutTap"
            }
        ]
    }

[szimek]

Here's what I got for removing items from navigation bar added by child views:

    onShow: function (view, eOpts) {
        var navigationView = this.up(),
            navigationBar = navigationView.getNavigationBar();


        this._navigationBarItems = Ext.Array.map(this.config.navigationBar.items, function (item) {
            return navigationBar.add(item);
        });
    },


    onHide: function (view, eOpts) {
        var navigationView = this.up(),
            navigationBar = navigationView.getNavigationBar();


        Ext.Array.forEach(this._navigationBarItems, function (item) {
            navigationBar.remove(item);
        }, this);
    },

Is there any way to simplify it (i.e. not store internally all items added to the nav bar)?

[EDIT] It sucks The buttons are not animated the way title is and disappear once the new view is in place, probably once the animation is finished.

After all I'm not really sure if I want to use navigation view Even with this stuff above moved into a mixin, I'd still have to figure out how to define handlers for nav bar buttons in child views and not in nav view.