How to remove particular view from navigation stac

Question

I'm pushing views like this this.up('navView').push({xtype: 'myView'})

How can I remove particular view, which is in the middle of navigation stack?

At least I should get rid of this warning

[WARN][Ext.Component#constructor] Registering a component with a id (listxyz) which has already been used. Please ensure the existing component has been destroyed (Ext.Component#destroy().

Answer 1

Did you mean, that when you press a button (or the back button) it should jump back say 2-3 views, instead of just one view ?

Example : traversing the views it goes ::::

1 -> 2 -> 3 -> 4 -> 5 (set some condition X) -> 6 -> (now reversing using back button) -> 5 -> 4 -> 2 (because 3 has already disappeared due to condition X) -> 1.

If that's what you mean, then you can extend the back button functionality in the controller by listening for the "back" event in the navView. Then once you get the event, you can check the number of items in the navigation view, and accordingly decide to pop either 1 or 2 or 3 events, therefore jumping backwards by either 1-2-3 etc views. To the user, this would make it seem like the navigation view popped (in the example above) view 3 when you reached view 5.

Code as follows ::

back : function(){
    if(condition=="X"){
        //so if your 5th view (say) set some condition, then when you try to pop, instead of popping one, it will pop 3 views (say). 

        Ext.getCmp('navView').pop(3);
    }
}

How to find out which view is being deactivated (so that you only pop 3 views (say) after you leave the view 5 and not while you'r

Answer 2

Before pushing a view check weather the view already exists, and destroy it if its already there, so you wont get those warnings and can navigate easily.

if(Ext.getCmp('myView')){
                Ext.getCmp('myView').destroy();
}

//Push myView

where  myView should be the id of that view declared in config of that view


    config: {

        id:'myView',

    }

Answer 3

We have two method for you problem

First is removeAt

Removes the Component at the specified index:

myNavigationView.removeAt(0); //removes the first item

Second is remove

remove( item, destroy ) : Ext.Component1
Removes an item from this Container, optionally destroying it
myNavigationView.remove('ChildComponent ItemId here in single quotes',true);

Answer 4

First thing: do not use remove or removeAt in navigationview! The remove and removeAt are methods from Container (http://docs.sencha.com/touch/2.2.0/source/Container3.html#Ext-Container-method-remove). When you use navigation.pop(X) the object do a count of inner elements, that not happens when you use remove/removeAt. So you could have some troubles like the "back button" showing in the first page, because the remove not updated the count (http://docs.sencha.com/touch/2.2.0/source/View2.html#Ext-navigation-View-method-doPop).

Now about your question: Use the pop(X). You could check wich page are before pop, so you wont have any warning.

In my application I have a button to back to the first page of navigation.

    var ctx = Ext.getCmp('navView');
    var pages = ctx.getInnerItems().length -1;
    if(pages > 0){
        ctx.pop(pages);
    }

So you could check if the user is in the "X" page or check compare the last item:

    // compare with the position
    var ctx = Ext.getCmp('navView');
    var pages = ctx.getInnerItems().length -1;
    if(pages == 5){
        ctx.pop(2);
    }

    //OR compare with the last object
    var ctx = Ext.getCmp('navView');
    var innerElements = ctx.getInnerItems();
    var pages = ctx.getInnerItems().length -1;
    if(innerElements[pages].config.xtype == "myXtypeClass"){
        ctx.pop(2);
    }

Answer 5

Try removing the values from the array using splice:

var idx = this.up('navView').getItems().indexOf({xtype: 'myView'});
this.up('navView').getItems().splice(idx,1);