1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default mvc - menu to load different views in the viewport center

    mvc - menu to load different views in the viewport center


    Hi guys!
    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

  2. #2
    Sencha User xava's Avatar
    Join Date
    Mar 2009
    Location
    Argentina
    Posts
    36
    Vote Rating
    0
    xava is on a distinguished road

      0  

    Default


    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?

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    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:

    Quote Originally Posted by wiulma View Post
    ...A global function empty the center region, call the init for the new controller ...
    Just in case you were not aware:
    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.

  4. #4
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by wiulma View Post
    Hi guys!
    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 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.

  5. #5
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    1
    Vote Rating
    0
    cameo is on a distinguished road

      0  

    Default Looking for examples

    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?

  6. #6
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    Quote Originally Posted by cameo View Post
    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.

    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