How to remove a specific view from the navigation stack in sencha touch?

Question

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

How to delete a certain view that is in the middle of the navigation stack?

At least I have to 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

Before you click the button to view the weather check, the view already exists and destroy it if it already exists, so you will not receive these warnings and can easily navigate.

 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 2

We have two methods for you.

RemoveAt first

 Removes the Component at the specified index: myNavigationView.removeAt(0); //removes the first item 

The 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 3

Did you mean that when you press the button (or the back button), it should bounce, say, 2-3 views, and not just one view?

Example: moving viewed objects ::

1 → 2 → 3 → 4 → 5 (set some condition X) → 6 → (now using the return button) → 5 → 4 → 2 (since 3 has already disappeared due to condition X) → 1.

If this is what you mean, then you can extend the functionality of the back button in the controller by listening to the "back" event in navView. Then, as soon as you receive the event, you can check the number of elements in the navigation view and accordingly decide whether to place either 1 or 2 or 3 events, so jump back to 1-2-3, etc. For the user, it would look as if you had reached view 5, you would see a navigation screen (in the example above) 3.

The code is 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 do you know which view is being deactivated (so that you only display 3 views (say) after you leave view 5, and not while you

Answer 4

First: do not use remove or removeAt in navigation! Remove and removeAt - methods from the container ( http://docs.sencha.com/touch/2.2.0/source/Container3.html#Ext-Container-method-remove ). When you use navigation.pop (X), the object counts the internal elements, which does not happen when you use remove / removeAt. Thus, you may have some problems, such as the “back button” displayed on the first page, because deletion does not update the counter ( http://docs.sencha.com/touch/2.2.0/source/View2.html # Ext-navigation-View-method-doPop ).

Now about your question: use pop (X). You can check which page before pop, so you will not have any warnings.

In my application, I have a button to return to the first navigation page.

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

Thus, you can check if the user is on page "X" or compare the last element:

  // 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 values ​​from the array using splicing:

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