extjs6.0 动态加载_动态加载 ExtJS 类库

ExtJS 是一个非常优秀的 JS 框架， 由于 ExtJS 自身非常庞大， 用于开发测试的 ext-all-debug.js 文件达到了 3.24M ， 如果是再加载带注释的 ext-all-debug-w-comments.js 则更是达到了 6M ， 可以说是非常庞大了， 因此动态加载 ExtJS 是很有必要的， 接下来就介绍如何对 ExtJS 做动态加载。

首先需要先创建一个基本可用的 ExtJS 模板， 这个很简单， 如下所示：

我们需要引用的脚本是 ExtJS 根目录下的 ext-debug.js ， 不是 ext-all-debug.js， 这个文件非常小， 只有几百K ， 当让这个只是最基本的 ExtJS 组件， 不包括任何的界面功能。

ExtJS 中的动态加载是由 Ext.Loader 来完成的， 默认不启用动态加载， 所以接下来需要做的事配置 Ext.Loader 启用动态加载， 在上面模板的 body 标签内添加如下代码：

Ext.onReady(function() {

Ext.Loader.setConfig({

enabled : true,

disableCaching: false,

paths : {

Ext : '/ext-4/src'

}

});

});

上面的代码启用了动态加载， 禁用了浏览器缓存， 以及指定了 ExtJS 的所部署的路径。

现在用浏览器测试一下， 同时打开开发人员工具， 切换到网络标签， 跟踪浏览器的 http 请求， 如下图所示：

从图中可以看出， 现在只加载了css和少量的脚本， 并没有加载 ExtJS 额外的组件。

新建一个测试 Javascript 文件， 输入如下代码， 并保存为 testWindow.js 。Ext.define('App.testWindow', {

extend: 'Ext.window.Window',

title: 'My Window',

width: 300,

height: 200,

html: '

Hello,world!

',

initComponent: function() {

this.callParent();

}

});

然后再 Ext.Loader 的配置中添加一条路径： App : '.' ， 再添加一个测试按钮， 以及测试按钮的点击处理函数， 如所示：

Create Window

function createWindow() {

var win = Ext.create('App.testWindow');

win.show();

}

现在， 刷新一下浏览器， 能看到 Create Window 测试按钮， 在浏览器看到的情形如下图所示：

从图中可以看到， 浏览器依次加载了 testWindow.js 、 /ext-4/src/window/Window.js 、 /ext-4/src/panel/Panel.js 等相关文件。

从上面的测试可以看出， 动态加载 ExtJS 是可以的， 但是文件有点儿多， 仅仅创建一个简单的窗口就需要加载 100 多个文件， 所以最终的建议是将所需要的 ExtJS 组件单独编译成一个文件或者直接使用 ext-all.js ， 自己写的 js 文件倒是可以考虑进行动态加载。