Dynamically Load Extjs Modular application

Question

I am in to developing a large client side app with very complex views on each modules using Extjs5. I have developed apps in Extjs but they all compile to a single app.js file. So based on the complexity of the views in all the app mockups I am estimating the size of the app will be around 20MB to 25MB even after compiled. I was thinking to split the modules as separate applications and create a master app with tabs or something, which triggered will be loading individual apps in a iFrame within the master app. But I doubt if the iframe behaviors are altered in different browsers or deprecated in any future browser releases, that will be another big problem. So is there any way in sencha cmd, which compiles app in separate files based on modules and load them on demand out of the box ? If not what is the advisable solution I should be going ahead with.

http://stackoverflow.com/questions/13939305/an-extjs-app-calling-another-extjs-app/13944686#13944686 — Yellen, Apr 21 '15 at 06:45
@yellen I have already gone through the post. But there the approach is still unclear to me. Is it a single application or are the plugins separate extjs applications like "operations", "authorization" etc..? What does the metadatas in the plugins object do ? I couldn't see them getting called or used anywhere in the sample utils. If its a single application, will the plugins be compiled as separate files and load them on demand ? I can see the function "discoverPlugins" to be using a Ext.each implementation to load all the modules iteratively on initial load itself right ? — leninmon, Apr 21 '15 at 08:29
You could accomplish something similar to this by creating a "multi-page" app. What this ultimately is is a series of applications within a single workspace, each with their own app.js file. Utilizing this strategy, you could divide up your application into logical sections, each section being one of the "pages" or "apps" within the workspace. — Yellen, May 01 '15 at 06:27
Further readings - http://docs.sencha.com/cmd/5.x/workspaces.html#Sharing_Code_Between_Pages http://docs.sencha.com/extjs/4.2.3/#!/guide/command_app_multi http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_packages.html http://docs.sencha.com/cmd/5.x/cmd_packages/cmd_creating_packages.html — Yellen, May 01 '15 at 06:27
@Yellen, I have a similar requirement, where i need generate multiple js files (minified files) with sencha CMD 4.2.2. https://stackoverflow.com/questions/64102523/how-to-generate-multiple-files-with-sencha-cmd Can you suggest this is possible or not ? — SUJU FE, Sep 29 '20 at 11:54

score 1 · Answer 1 · answered Jun 10 '17 at 20:11

Starting with Sencha Cmd 6.5 you can split your code into multiple files. To achieve this, you have to split your code into exjts packages if it’s not already done:

In the end, you should have a similar folder structure to this:

workspaceDir
|
+->appA
+->appB
+->packages
 |
 +-> local
  |
  +->CoreComponents
  +->ProcurementModule
  +->ForumModule
  +->BOMModule
  +->ReportModule

In your app.json file you could add/move your packages from requires to uses. As a last step you have to add the new package-loader to the requires array in app.json. You end up with something like that:

{
    // [...]

    "uses": [
        "ProcurementModule",
        "ForumModule",
        "BOMModule",
        "ReportModule"
    ],

    "requires": [
        "CoreComponents",
        "package-loader"
    ]

    // [...]
}

Next you need to start your Sencha Cmd build with the additional flag -uses. If you do this, Sencha Cmd will build your optional packages first and add them to the resource folder in your build output directory.

sencha app build -uses production

It is important, that you don't have any references to classes in optional packages from your main application. Otherwise your build will fail.

Since your optional packages are not loaded automatically on page startup you need to trigger the loading process manually. I do it usually within the routing process of my AppControllers. Here an example:

Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
        'Ext.Package'
    ],

    routes: {
        'forum': {
            before: 'loadForum',
            action: 'showView'
        }
    },

    loadForum(action) {
        if (Ext.Package.isLoaded('ForumModule')) {
            action.resume();
        } else {
            //Loading mask code here [...]
            Ext.defer(() => {  // it needs some time to show up the loading mask
                Ext.Package.load('ForumModule').then(() => {
                    //Remove loading mask code here [...]
                    action.resume();  //proceed router process; all package files loaded
                });
            }, 500);
        }
    },

    showView() {
        this.getView().add({xclass: 'ForumModule.view.MainView'});
    }
});

More information on this topic: http://docs.sencha.com/cmd/guides/whats_new_cmd65.html#whats_new_cmd65_-_dynamic_package_loading

I have a similar requirement, where i need generate multiple js files (minified files) with sencha CMD 4.2.2. https://stackoverflow.com/questions/64102523/how-to-generate-multiple-files-with-sencha-cmd Can you suggest this is possible or not ? — SUJU FE, Sep 29 '20 at 10:09

Dynamically Load Extjs Modular application

1 Answers1

Linked