extjs 6 构建异步加载的脚本

Question

我正在使用extjs6来开发一些东西，在我单击按钮将选项卡添加到选项卡面板后，某些脚本是异步加载的，当我通过sencha app build构建应用程序时，此脚本未包含在构建目录中。在这种情况下构建应用程序时，哪种方法是正确的？

任何帮助，谢谢。

Answer 1

根据脚本是否应该是动态的，我会使用 Ext.loader 功能。

如果没有，只需将它们包含在您的索引中.html。

动态方式可能如下所示：

Ext.define('muzkatMap.Module', {
    singleton: true,
    loadAssets: function () {
        return this.loadMapScripts();
    },
    filesLoaded: false,
    scriptPaths: [
        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css',
        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js',
        'https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.1.17/leaflet-providers.js'
    ],
    loadMapScripts: function () {
        var loadingArray = [], me = this;
        return new Ext.Promise(function (resolve, reject) {
            Ext.Array.each(me.scriptPaths, function (url) {
                loadingArray.push(me.loadMapScript(url));
            });
            Ext.Promise.all(loadingArray).then(function (success) {
                    console.log('artefacts were loaded successfully');
                    resolve('Loading was successful');
                },
                function (error) {
                    reject('Error during artefact loading...');
                });
        });
    },
    loadMapScript: function (url) {
        return new Ext.Promise(function (resolve, reject) {
            Ext.Loader.loadScript({
                url: url,
                onLoad: function () {
                    console.log(url + ' was loaded successfully');
                    resolve();
                },
                onError: function (error) {
                    reject('Loading was not successful for: ' + url);
                }
            });
        });
    }
});

您只需调用代码：

muzkatMap.Module.loadAssets().then(function(){
// do something with the newly available components
})