What is the best way to navigate between screens ... especially back buttons

[blakdronzer]

Hi there,

I got a lot of knowabouts from the forum about handling elements without ID and stuff.. I am not an expert.. just refered to 1 of a sample sencha touch 2 mvc app and there i found a controller App ... binding to the back / home button of the viewport.

it had a function to handle activechange and back button .. especially for managing the navigation. . showing / hiding the back / home button if the view is 1st screen

......
handleItemChange: function(viewport, newCard, oldCard) {	var isFirst = newCard.isXType('app-servicelistitems'),
	    backBtn = viewport.down('button[ui=back]'),
	    homeBtn = viewport.down('button[ui=home]');


	backBtn.setHidden(isFirst);
	homeBtn.setHidden(isFirst);
	if (isFirst) {
	    viewport.remove(oldCard);
	}
},
handleBack: function() {
	var viewport   = this.getViewport();
	viewport  .remove(viewport.getActiveItem());
	var curCard = viewport.getAt(viewport.getItems().length-2);
	viewport.setActiveItem(curCard);
}

.... to change the view ... it used to add a view to the viewport and set it to active item

                    var newCard    = viewport.add({
                        xtype : 'payblox-servicelistitems'
                    });
                    viewport.setActiveItem(newCard);

Debugging the same and navigating through all the forum queries.... what i noticed was not the best way to do the same as what i noticed that if we follow the pattern it kills the reference in ref as the ref refers only to the first object created. If the same is destroyed as in above, the reference starts pointing to undefined ... and thats where the major issue happens. In the code above .. the destruction too is important as the same will clean up the instance created and that not in use. But the same also have a drawback that referring to the view becomes a big trouble.
Similarly if we wanted to refer to the form using the getForm() method where form is a ref. .. 1st time it works fine but for secondtime it just dose not refer back correct instance... its undefined.

If i remove the destroy option and set the activeview to (viewport.getItems().length-2) that will change to the previous item but the same when we go to the same page again with adding the view to the card, there are now 2 instance of the view. and that logic too fails.

That's where i am confused as to how to handle navigation for an application. Or is there a better way of setting / referring to the view and back and forth so the application performance too remains smooth and references too remain / stay intact.

Hope i have clear description for the issue am facing.
Help required..
Thanx in advance!!!!!!

If someone can post back some code / example.. that will be awsome /great as how to go about for the same

[mitchellsimoens]

Your app has a structure, usually each item in a card layout has it's own class definition and therefor a xtype. To do this properly, history should be used as it will change the hash and keep track what was displayed last, this will come in the beta release. However right now, if your items are known then you can setActiveItem on a config object passing in the xtype and then animate backwards. This will create the component and set it active as you destroyed it when it was off the screen. If you want to keep the form values or selections on a list, that is where you should pass in the false as the 2nd argument of the remove() so that it destroys from the DOM but doesn't destroy the component, it's still kept in memory.

[blakdronzer]

Hi Mitchell,

Thanks for the update. I followed the process / procedure of adding false with the remove function that will remove the element but will not destroy it from memory. It works well but i have got an issue with the same. I still manage to add the elements with the viewport.add('whateverelement'). And as i may see this probably creates a new instance of the view rather than referring to the earlier one left in memory. I can say that because what i did in the system was i filled up a form and submitted it .. i got the results for the same. The same form is also applicable for other service with different parameters. This time, i fill in other data and send submit but to my surprise what i noticed that it is not picking up new data ... rather .. it is still refering to old data.

What in this situation you suggest should i be doing it?