Results 1 to 3 of 3

Thread: Adding controllers/views dynamically in Ext MVC pattern

  1. #1

    Default Adding controllers/views dynamically in Ext MVC pattern

    Hi there,

    I've looked around the forums and couldn't quite find an example of what I'm looking for, so I thought I'd create a new post. Sorry if this has been asked before.

    I'm creating a new Ext4 application, and am using the MVC framework that Ext has built in, but I'm struggling with how to dynamically add controllers and their views to the application. Here's what I have:
    • I have a left navigation menu
    • Each menu item replaces the main content of the page on click
    • Some of the panels that are shown this way are comprised of many smaller views and controllers
    Take for a example, a "User Management" navigation item, which replaces the main content panel with a view comprised of:
    • User grid and its controller
    • Add user form and its controller
    • Search form and its controller
    Obviously I can't instantiate these three controllers on application launch, since the views aren't there and I wouldn't be able to find anything with "this.control". It seems ideal that neither the controllers nor views are available until the user clicks the link, but there doesn't seem to be examples or support for "adding" these controllers and views on click.

    In Ext3, I'd have a click listener on the menu item, which would fire an event and eventually create a UserManagementPanel (which contains the three components above) and would add it to the main content panel. What is the equivalent in Ext4's MVC architecture? Is there one?

    The best help I could find in the forums was here: http://www.sencha.com/forum/showthre...l=1#post604975, which basically says to use getController('newController") and rely on the fact that this instantiates the controller if it isn't found.

    Is this really the best or only way to do this?

    An answer that supplies pseudo-code, or just a general outline of the approach I should be taking for this kind of application, would be perfectly helpful to get me on my way.

    Thanks!

  2. #2
    Sencha User crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218

    Default

    This is what I did to load a controller:

    PHP Code:
    //1.- Set the paths, 
    // var appname = "Company";
    // Bleext.desktop.Constants.JS_PATH = "http://localhost/path/js/app/"
    Ext.Loader.setPath(appname,Bleext.desktop.Constants.JS_PATH+appname);

    //2.- Load the controller class
    Ext.Loader.require(app.klass,function(){
        
    me.desktop.add(win);
        
    me.desktop.windowMgr.loader.hide();
        var 
    me.getController(app.klass); // 3.- Create the controller or get the controller if it exist
        
    c.win win;
        
    c.init(me);         // 4.- Run the init method manually
        
    c.onLaunch(me); // 5.- Run the onLaunch method manually
        
    win.show();
    }); 
    https://github.com/crysfel/Bleextop/...Application.js

    That's all, it works perfect.

    In order to import the views, models and stores you need to declare them in the controller class:

    PHP Code:
    Ext.define("Your.namespace.controller.YourController",{
        
    extend "Ext.app.Controller",

        
    views : [...],
        
    models : [...],
        
    stores : [..]

         
    init : function (){

         }
    }); 
    I hope it helps.

    Cheers

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    15

    Default

    Would all the 'dynamic' files i.e. views, models etc be individual files in the standard mvc app structure?
    Sorry new to javascript and just wondering how to implement dynamic loading as you describe in relation to packaging/minification of the files for deployment.
    I basically want a core package and then the ability to plug in some dynamic controllers and views.

    Thanks

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •