动态加载 ExtJS 类库
动态加载 ExtJS 类库
ExtJS 是一个非常优秀的 JS 框架, 由于 ExtJS 自身非常庞大, 用于开发测试的 ext-all-debug.js
文件达到了 3.24M , 如果是再加载带注释的 ext-all-debug-w-comments.js
则更是达到了 6M , 可以说是非常庞大了, 因此动态加载 ExtJS 是很有必要的, 接下来就介绍如何对 ExtJS 做动态加载。
创建一个基本的模板
首先需要先创建一个基本可用的 ExtJS 模板, 这个很简单, 如下所示:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://localhost/ext-4/resources/css/ext-all.css" />
<script type="text/javascript" src="https://localhost/ext-4/ext-debug.js"></script>
</head>
<body>
</body>
</html>
我们需要引用的脚本是 ExtJS 根目录下的 ext-debug.js
, 不是 ext-all-debug.js
, 这个文件非常小, 只有几百K , 当让这个只是最基本的 ExtJS 组件, 不包括任何的界面功能。
配置 Ext.Loader 启用动态加载
ExtJS 中的动态加载是由 Ext.Loader
来完成的, 默认不启用动态加载, 所以接下来需要做的事配置 Ext.Loader
启用动态加载, 在上面模板的 body
标签内添加如下代码:
<script type="text/javascript">
Ext.onReady(function() {
Ext.Loader.setConfig({
enabled : true,
disableCaching: false,
paths : {
Ext : '/ext-4/src'
}
});
});
</script>
上面的代码启用了动态加载, 禁用了浏览器缓存, 以及指定了 ExtJS 的所部署的路径。
现在用浏览器测试一下, 同时打开开发人员工具, 切换到网络标签, 跟踪浏览器的 http 请求, 如下图所示:
从图中可以看出, 现在只加载了css和少量的脚本, 并没有加载 ExtJS 额外的组件。
测试动态加载
新建一个测试 Javascript 文件, 输入如下代码, 并保存为 testWindow.js
。
Ext.define('App.testWindow', {
extend: 'Ext.window.Window',
title: 'My Window',
width: 300,
height: 200,
html: '<h1>Hello,world!</h1>',
initComponent: function() {
this.callParent();
}
});
然后再 Ext.Loader
的配置中添加一条路径: App : '.'
, 再添加一个测试按钮, 以及测试按钮的点击处理函数, 如所示:
<button onclick="createWindow()">Create Window</button>
<script type="text/javascript">
function createWindow() {
var win = Ext.create('App.testWindow');
win.show();
}
</script>
现在, 刷新一下浏览器, 能看到 Create Window
测试按钮, 在浏览器看到的情形如下图所示:
从图中可以看到, 浏览器依次加载了 testWindow.js
、 /ext-4/src/window/Window.js
、 /ext-4/src/panel/Panel.js
等相关文件。
结论
从上面的测试可以看出, 动态加载 ExtJS 是可以的, 但是文件有点儿多, 仅仅创建一个简单的窗口就需要加载 100 多个文件, 所以最终的建议是将所需要的 ExtJS 组件单独编译成一个文件或者直接使用 ext-all.js
, 自己写的 js 文件倒是可以考虑进行动态加载。
- 你听过算法也是可以贪心的吗?
- 前后端分离ueditor富文本编辑器的使用-Java版本
- Golang语言社区--Go语言基础第六节函数
- Golang语言社区--理解 go interface 的 5 个关键点
- 得到一个物种所有基因的TSS(转录起始位点)区域的bed文件。
- 如何选择聚类模块数目
- 谁能告诉我,这数据测毁了么?
- 计算资源及编程-仅针对生信人员
- 从WGS测序得到的VCF文件里面提取位于外显子区域的【直播】我的基因组84
- 基因组重测序的unmapped reads assembly探究 【直播】我的基因组86
- Centos 下非 Root 安装 Microsoft R Open
- 下载TCGA所有癌症的maf文件做signature分析
- 比对NR库看看物种分布【直播】我的基因组88
- 探究某个基因的外显子覆盖度情况【直播】我的基因组87
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法