将 Sencha Cmd 与动态加载的控制器一起使用 [英] Using Sencha Cmd with dynamically loaded controllers

问题描述

我使用 Ext JS 4 创建了一个应用程序.app.js 中的 controllers 属性只包含主控制器:

I've created an application using Ext JS 4. controllers property in my app.js contains only the main controller:

Ext.application({
    name: 'MyApp',
    appFolder: 'app',

    controllers: [
        "main.App"
    ],

    loadController: function(controller) {
        var oController = this.getController(controller);
        oController.init(this);
        oController.onLaunch(this);
    }
});

MyApp.main.App 控制器使用 getController() 方法(参见 loadController() 方法).这些控制器是动态加载的，没有列在我的 index.html 文件中.

MyApp.main.App controller loads additional controllers by name using getController() approach (see loadController() method). These controllers are loaded dynamically and are not listed in my index.html file.

为了生成用于部署到服务器的生产版本，我通过在我的应用程序文件夹中发出以下命令来使用 Sencha Cmd:

In order to generate production version for deployment to server I am using Sencha Cmd by issuing the following command in my application folder:

sencha app build

工具正常完成并将所有文件压缩成一个大的all-classes.js.问题是我动态加载的控制器没有包含在那个文件中.

Tool finishes normally and compresses all files into one big all-classes.js. The problem is that my dynamically loaded controllers are not included in that file.

使动态加载的控制器(总共超过 100 个)由 Sencha Cmd 缩小和处理的正确方法是什么?

Which is the correct way to make dynamically loaded controllers (over 100 in total) to be minified and processed by Sencha Cmd?

我知道，我可以在我的 app.js 中列出它们，或者使用 Ext.require 将它们包含在某个文件中，但我正在寻找正确的方法来包含超过 100 种不同的控制器、视图、模型和存储自动在我的构建中.我相信 Ext JS 的其他用户正在创建大型应用程序并以某种方式构建，我将不胜感激任何建议或只是 成功案例，这将帮助我找到正确的构建方式.

I know, that I can list them in my app.js, or include in some file using Ext.require, but I am seeking for correct approach for including over than 100 different controllers, views, models and stores automatically in my build. I believe that are other users of Ext JS, which are creating large-scale applications and are building somehow and I'll be grateful for any suggestions or just success stories, which will help me to find the correct way to build.

推荐答案

我会将所有控制器放入 uses 数组.这些应该强制工具跟踪它们并将它们包含在构建中.另一方面，uses 不要求类在定义时可用，但保证它们在 onReady(一个在应用程序内)块时可用) 被调用.

I would put all controllers into the uses array. These should force the tool to keep track on them and include them into the build. On the other hand uses does not require the class to be available at definition time but guarantee them to be available the time the onReady(one is within the application) block(s) is(are) called.

请注意，您需要在使用数组！

Note that you will need to use the fully qualified names within the uses array!

我不使用构建工具，因此我无法测试它，但它应该可以工作.

从评论中更新 由 @bhovhannes 提供的示例

Update from the comments example provided by @bhovhannes

bhovhannes: 我在 build.xml 中添加了一个代码，它收集了当我进行 sencha 应用程序构建时，我的控制器使用数组.这样我在开发过程中在使用数组中不填任何内容，只需添加控制器进入控制器文件夹，因为它们都是从动态加载的我的应用

bhovhannes: I've added a code in build.xml, which collects all names of my controllers into uses array when I do sencha app build. This way I fill nothing in uses array during development, just add controllers into controller folder, because all them are loaded dynamically from my app

app.js

Ext.application({
    name: 'MyApp',
    appFolder: 'app',

    controllers: [
        "main.App"
    ],

    uses: [
        /*ant-generated-content-start*/ /*ant-generated-content-end*/
    ],

    autoCreateViewport: true,
});

build.xml

<?xml version="1.0" encoding="utf-8"?>
<project name="MyApp" default=".help">
    <import file="${basedir}/.sencha/app/build-impl.xml"/>

    <target name="-before-build">

        <echo message="Collecting all controllers in application class property ... "/>
        <fileset id="app_controllers" dir="${app.dir}/app/controller" casesensitive="yes">
            <include name="**/*.js"/>
        </fileset>
        <pathconvert pathsep="," property="app_controller_names" refid="app_controllers" targetos="unix">
            <chainedmapper>
                <globmapper from="${app.dir}/app/*" to="${ant.project.name}/*" casesensitive="no" handledirsep="yes"/>
                <chainedmapper>
                    <regexpmapper from="^(.*).js$$" to='"1"'/>
                    <filtermapper>
                        <replacestring from="/" to="."/>
                        <replacestring from="" to="."/>
                    </filtermapper>
                </chainedmapper>
            </chainedmapper>
        </pathconvert>
        <echo message="Collected controllers: ${app_controller_names}"/>

        <echo message="Injecting into app.js ..."/>
        <replaceregexp file="${app.dir}/app/app.js"
                       match="/*ant-generated-content-start*/(.*)/*ant-generated-content-end*/"
                       replace="/*ant-generated-content-start*/ ${app_controller_names} /*ant-generated-content-end*/"
                       byline="true"
                />
    </target>

    <target name="-after-build">
        <echo message="Reverting to original app.js ..."/>
        <replaceregexp file="${app.dir}/app/app.js"
                       match="/*ant-generated-content-start*/(.*)/*ant-generated-content-end*/"
                       replace="/*ant-generated-content-start*/ /*ant-generated-content-end*/"
                       byline="true"
                />
    </target>

</project>

这篇关于将 Sencha Cmd 与动态加载的控制器一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！