View Full Version : Beginner Question regarding loading Views with MVC ExtJS 4

Will de la Vega
14 Feb 2013, 1:44 PM
I have tried to post this question for three times and somethings happens and it doesn't seem to post. Here I go again in hope to find some help.

I have been a RIA developer for many years now and I am new to Sencha which I am learning to love more than any other platform for its neatness and MVC architecture, as well as having a tool like Architect.

I am building a very simple app that has this structure: A viewport, inside a border, then in the west region a view composed of a TreePanel and at the right a Panel with a toolbar at the top and the relevant part is the Panel ocupying the center (very standard layout for what Iīve seen).


Then I want that when I click on a node in my treeview a View loads and then when I click in another node (or letīs call it menu option) that view unloads or be destroyed or somehow disappear taking the minimum amount of memory and resources possible, so the new View may load cleanly in the content panel. I was thinking in using a TabPanel for this, but I think that there should be a way to load/unload a view in a single panel in a clean way.

Moreover, a friend of mine who knows ExtJS 3 very well, advised me to use this layout in many php pages and have a different view in each one and call document.location to change between pages when clicking the TreePanel nodes. It just doesnīt feel right to me because I think it kills the whole purpose of Ajax and takes us back to what can be done with a server technology. I believe a RIA should use a single page for all its modules and views. Am I right? is this valid in Sencha? In Silverlight I use Prism as the MVC system and it loads contents dynamically. I would love to be able to do something like that with Sencha.

Even more, this app is based on user roles, and there are some pages which views and controllers need to be build on the fly and I am wandering if I can use a clean MVC solution compatible with Architect to do this. This is my main goal (probably very ambicious) to create this app without leaving Architect and following only the best practices. I have read the excellent articles by Tommy Maintz "Architecting Your App in Ext JS 4" which has been of great help as well as other articles in the website but I have not found the right one to tell me how to build a basic app like this cleanly. Can somebody please point me in the right direction?

I fell like someone walking in a very dark room trying to find the switch to turn the lights on. Please help. Thanks and regards.

14 Feb 2013, 5:46 PM
Hi Will I hope I have understood your problem and I can help you saying that you can load a view using something like this in your controller:

var newContent = Ext.widget('myView');

Where this.getTargetPanel() is a selector pointing to the container ( panel ) where you want to put a new view. Hope this helps

Will de la Vega
15 Feb 2013, 7:01 PM
Thanks for sharing, it took 3 minutes to solve it ... awesome!