mvc - menu to load different views in the viewport center
I'm new to extjs4 and mvc, but not to Extjs.Until now I have developed with extjs3.
I have a single page app, with toolbar in the viewport north region, and a center region.
When I click on a menu item in the toolbar, the center region must be empty and load the new views.
Now, I can't understand how to develop these steps.
I have done test and search a lot, but no success.
I don't understand if I must have a global controller that listen to the menu item click and load the center region, or if a must have a global function to load the center region.
For now I choose the second. A global function empty the center region, call the init for the new controller and call one abstract function in my base controller to init the view. Each controller implements this abstract function, so the single controller knows how to init his view.
But I'm not sure this is the write way to implement the MVC.
Can you please help me?
thanks a lot
i am having a similar question for a toolbar
for know, i decided have a controller that listen for the toolbar and the menu click event, and a control call for every menu.Item
but know, i am not sure how go on, for example for a menu.Item that open a window with a form
for sure the window with the form must be a separate view, but, what about this controller? i call it manually for the control event in the menu controller? or i must load it with the application and listen for the window events?
Using MVC, all event handling should be in a controller. If you defined your viewport (with the toolbar) in the Application class, you can have a 'ViewportController' that listens to events of the toolbar items, which can in turn call another controller to init its view.
My rule: A single custom view is to be controlled by a single controller. A controller can control multiple custom views; it just depends on the complexity of the views or event handling code and how you want to break up control logic.
Side comment: You state:
Just in case you were not aware:
Originally Posted by wiulma
The way the ExtJS MVC works is that there should only be a single instance of any specific controller. This single instance controls all instances of the views it handles. Initializing (i.e. calling the init method) multiple instances of a controller will duplicate the event listeners handled by the controller, thus causing each controller instance to run it's processing for a single user action.
I use a common controller that, among other app-wide specific things, is responsible for clearing and filling the center region based on navigation selections. The nice thing about this approach, in my experience, is that you can couple this with ExtJS's history management. So for example, you could assign custom routes (via a hash-bang or other device) to each navigation item that will allow the user to bookmark particular states of the app, as well as make the browser's back button something that is actually meaningful within the app.
Originally Posted by wiulma
Ext JS Premium Member
Looking for examples
Would you know of any examples related to this?
I am also very interested in the performance issues related to a user switching in and out of these viewports. Normally I see a weakness in the RIA approach using a single page application because of the memory problems. Does ExtJS somehow manage the creation and destruction of the widgets or is this something the developer should do?
In my app, I handle the destruction of the elements directly.
Originally Posted by cameo
RE: examples, I don't have any handy, but the approach I typically take is:
- Start with border layout
- Center region contains the current "section" of the app
- In a global controller, I leverage ExtJS's History class to create a hash-bang for each section
- When the app loads, I check the url the hashbang
- If it exists, add the content for that section into the center region
- If not, load default content (usually welcome message/pr stuff in my apps)
- As user interacts with the main menu OR the browser's back/forward button, my global controller checks ExtJS History to determine if the current "state" of the app is known to any sections
- If a match is found, I destroy the content in the center region, and then add the content for the matched section