Navigation View reset() to arbitrary panel

[pdm]

I'm trying to use Ext.navigation.View to present a login panel for first-time users, followed by a 'home page' panel. Then the user goes through a series of steps, and at the end, is taken back to the home page.

Every time the user goes to the home page I want to clear the history, so the user can't go back through steps they already completed, and so the framework can destroy old views.

So the login panel is only the first on the stack for the first use, then I want home page to be first on the stack.

Is there a way to clear the navigation view items so that I can insert the home page as the first item and reset() from then on? Or should I be using some other method to show my login view panel, and always have homepage as the first view pushed on to the navigation view?

(It looks wrong if I literally do that and immediately push login view: then I can go back without having logged-in)

[mitchellsimoens]

Any time you go back, it will remove the items automatically. When you remove an item, by default it will destroy those items. So if you reset() then all the items besides the first one (the now active item) will be destroyed.

[pdm]

thanks Mitchell

The problem is I want to reset() to a different point once logged-in. Simplified example:

[0] login
[1] homepage
[2] record

on 'record' I have a button 'done', where I want to reset() to homepage. I don't want a back button on homepage because it would log out.

[mitchellsimoens]

The reset method will always go back to the first item, in this case your login page. You need to use the pop method. It can take number to go back or a ComponentQuery selector

[pdm]

No, I need the homepage to no longer have a back button. I want to reset the navigation view so that homepage is the first.

If I just pop to homepage, login is still at [0] and 'back' button is still showing and able to go back to login.

[mitchellsimoens]

You can listen for the activeitemchange event on the nav view and if the new item is the active, hide the back button on the nav bar.

[pdm]

Thanks. After some hacking this is what I have:

onNavigationviewActiveItemChange: function(container, value, oldValue, options) {
    if (value.xtype == 'homepage'){
        container.getNavigationBar().backButtonStack = [];
    }
}

Seems to work fine. Anyone anticipate problems with this approach?

[pdm]

There was a problem with that approach - sometimes the stack would be emptied when it shouldn't by going back and forth between one view and homepage. Also any views added before would stay in memory and not get destroyed. So I have revised to this:

onNavigationviewActiveItemChange: function(container, value, oldValue, options) {
    if (value.xtype == 'homepage'){
        var items = container.getInnerItems();
        var index = items.indexOf(value);
        if (index){ // Don't remove if homepage is already first in the stack
            var toRemove = items.splice(0,index);
            var nav_bar = container.getNavigationBar();
            // Remove from back button list
            nav_bar.backButtonStack.splice(0,index);
    
            // Remove from container
            for (i = 0; i < toRemove.length; i++) {
                container.remove(toRemove[i]);
            }
        }
    }
}