Managing views and the viewport

Heya,

I've started dabbling in Sencha Touch in the past 2 days and I must admit that it's as accessible as a brick wall. However, I like the flexibility and the power it gives, so I am sticking with it. That being said...

I've read a fair share of posts and tutorials, and since all of them were small examples, they all defined their views in the app.js, adding them to the viewport right away, like so:

Code:

---

                var homePage = {
                        xtype: "homepage"
                };
               
                var loginPage = {
                        xtype: "login"
                };
       
                Ext.Viewport.add([homePage, loginPage]);

---

As my app is increasing in size though, I don't believe this is a favorable approach. I'd like to load content when I need it, and clear out stuff from the viewport once it's no longer required. Is there a simple way of doing this? Any page I load currently I initialize and add to the viewport right there in the controller, however I worry that if the page is called multiple times it will be added to the viewport multiple times as well, kinda defeating the whole purpose. Any help in this matter would be greatly appreciated. Thanks in advance.

Best regards,
Damir H.

Bump, would really appreciate some pointers in regards to this.

I know the feeling, documentation is good but there needs to be more examples and better explanations of some points. Stick at it, I started about 8 months ago and have been following the posts here and studying the examples, after a few months it will come together. My recommendation would be to try the Sencha Architect trial and experiment, looking at the code as you go.

That being said read this about Viewports:

http://mitchellsimoens.com/2012/02/sencha-touch-2/fullscreen-madness/

(Ignore any references to new Ext Viewport etc....anything with new at the start was for Sencha Touch 1 but it is still a useful article).

Also search this forum for Ext Create and do some reading. Sencha Fiddle is also great to look at examples. If you google 'http://www.senchafiddle.com' with Google advanced search you can find all the Sencha Fiddle examples posted on the web. This will help with learning.

If your app is going to be big then its good to think like this....creating views on the fly can be done with Ext.Create instead of Ext.Define. In my Tabpanel app, I used Ext Define throughout, but this loads all the JS files together. Then I started using the OptimizedTab to save memory but that's another story! It basically clears from the DOM the unused components and saved me lots of memory and generally sped everything up.

You can have listeners in your controllers to listen for tap events on components.Download and inspect the Architect Projects I would, and also on Github there are many projects to pull apart and see how they work.

Good luck

:-)

Thank you, that was enough to get me on the right track. :D