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

问题描述

我已经使用Ext JS 4创建了一个应用程序。 app.js 中的控制器属性仅包含主控制器：

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.

推荐答案

我将把所有的控制器放在 使用 数组。这些应该强制该工具跟踪它们并将它们包含在构建中。另一方面，使用不要求在定义时间可以使用该类，但是当 onReady （一个在应用程序内）块（s） ）被称为。

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!

我不使用buildtool，因此我无法测试，但它应该可以工作。

从 > @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屋！