ExtJS4 MVC延迟加载

Question

Help! I have an ExtJS 4.2 MVC application that will contain multitudes of various Views. However, each user will have access to a mere fraction of the entire set. Obviously I don't want to load all of the Views for every user! Furthermore, each 'allowed' view should be loaded after the user has signed in.

In the past (before MVC) I used Ext.create() to dynamically load my .js class files. However, I'm trying to use the MVC design pattern and everything I've read online suggests that this seems to be a limitation of ExtJS 4.2 MVC. Is this true? Below is what I have tried so far.

First, the custom view definition (a basic container example):

Ext.define('My.custom.TestView', {
    extend: 'Ext.container.Container',
    alias: 'widget.myCustomTestView',
    html: 'Test',

    initComponent: function() {
        this.callParent(arguments);
    }
});

Second, the controller definition that's trying to load/instantiate the custom view:

Ext.define('My.custom.TestController', {
    extend: 'Ext.app.Controller',

    // Empty array because I want to
    // add views during run-time.
    views: [
    ],

    init: function () {
        // Attempt #1: This produces an error.
        this.getView('My.custom.TestView').create();

        // Attempt #2: This returns null.
        Ext.widget('myCustomTestView');

        // Attempt #3: This appears it might work, but it's ugly!
        Ext.create('My.custom.TestView');
        this.getView('My.custom.TestView').create();
    }
});

While #3 is the only one that does not give errors, it does not look right to me. Any suggestions/comments?

Answer 1

Ext.create() causes a synchronous load, so what happens is it actually checks to see if the dependent js file for your view has been loaded, if it isn't then it does a synchronous load of the js file and stops execution of your code until the js is loaded and initialized by Ext.Loader. You can then getView().create() on the class because your view class is now available within Ext.

For the other two:

1. Would produce an error because its predicated on My.custom.TestView already being loaded, which it isn't, so it can't find the definition of the class in what's it has loaded in order to create an instance of it.

2. Returns null most likely because of the way that Ext.widget is implemented, in order to keep a call to Ext.widget() which specifies a widget name for a class that hasn't been loaded yet from breaking your app.

Both 1 and 2 are different from Ext.create() in that they don't call Ext.Loader to resolve the class file and load it if it isn't found to be already loaded into Ext internally. They simply act on code that has already been loaded and is available in your application at the time they are called.

It's worth doing a bit of reading up on Ext.Loader in Exts docs here http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Loader