ExtJS笔记 Ext.Loader
Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used via the Ext.requireshorthand. Ext.Loader supports both asynchronous and synchronous loading approaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:
Ext.Loader是Ext JS4动态依赖加载能力的核心。最常见的情况是通过Ext.require使用它。Ext.Loader同时支持同步和异步加载方式。这里,我们将讨论这两种加载方式的优缺点。
Asynchronous Loading 异步加载
Advantages: 优势
- Cross-domain 跨域
- No web server needed: you can run the application via the file system protocol (i.e:
file://path/to/your/index .html
) 不需要web服务器:你能通过文件系统协议运行程序。比如file://path/to/your/index.html - Best possible debugging experience: error messages come with the exact file name and line number 舒服的调试体验:错误信息将返回确切的文件名字和行数。
Disadvantages: 缺点
- Dependencies need to be specified before-hand 依赖必须事先指定
Method 1: Explicitly include what you need: 方法一:明确包含你想要的
// Syntax
Ext.require({String/Array} expressions); // Example: Single alias
Ext.require('widget.window'); // Example: Single class name
Ext.require('Ext.window.Window'); // Example: Multiple aliases / class names mix
Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']); // Wildcards
Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
Method 2: Explicitly exclude what you don't need: 方法二,明确排除你不想要的
// Syntax: Note that it must be in this chaining format.
Ext.exclude({String/Array} expressions)
.require({String/Array} expressions); // Include everything except Ext.data.*
Ext.exclude('Ext.data.*').require('*'); // Include all widgets except widget.checkbox*,
// which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.
Ext.exclude('widget.checkbox*').require('widget.*');
Synchronous Loading on Demand 同步加载
Advantages: 优势
- There's no need to specify dependencies before-hand, which is always the convenience of including ext-all.js before 它不需要事先指明依赖,事先包含ext-all.js是很方便的。
Disadvantages:缺点
- Not as good debugging experience since file name won't be shown (except in Firebug at the moment) 调试体验不好,除非用Firebug调试,否则出错的文件的名字不会显示。
- Must be from the same domain due to XHR restriction不能跨域请求,因为XHR的限制必须是相同的域名。
- Need a web server, same reason as above 并且因为这个原因,必须有web服务。
There's one simple rule to follow: Instantiate everything with Ext.create instead of the new
keyword
可以遵守一个简单的法则:用Ext.create代替new关键字来实例化对象。
Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...}); Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
Behind the scene, Ext.ClassManager will automatically check whether the given class name / alias has already existed on the page. If it's not, Ext.Loaderwill immediately switch itself to synchronous mode and automatic load the given class and all its dependencies.
在后台,Ext.ClassManager会自动检查给定的类名或别名是否在页面已经存在。如果没有,Ext.Loader将会立即把它调整为同步模式,自动加载给定的类和它所有的依赖。
Hybrid Loading - The Best of Both Worlds 混合加载
It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
混合加载方式可以结合同步和异步加载的优势。开发流程非常简单:
Step 1: Start writing your application using synchronous approach.
第一步:用同步的方式写你的程序,
Ext.Loader will automatically fetch all dependencies on demand as they're needed during run-time. For example:
Ext.Loader将会自动按照需要获取所有的依赖,因为它们在运行时需要。例如
Ext.onReady(function(){
var window = Ext.widget('window', {
width: 500,
height: 300,
layout: {
type: 'border',
padding: 5
},
title: 'Hello Dialog',
items: [{
title: 'Navigation',
collapsible: true,
region: 'west',
width: 200,
html: 'Hello',
split: true
}, {
title: 'TabPanel',
region: 'center'
}]
}); window.show();
})
Step 2: Along the way, when you need better debugging ability, watch the console for warnings like these:
第二步:观看控制台的中如下的警告:
[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
ClassManager.js:432
[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
Simply copy and paste the suggested code above Ext.onReady
, i.e:
在Ext.onReady上面添加加载依赖的代码:
Ext.require('Ext.window.Window');
Ext.require('Ext.layout.container.Border'); Ext.onReady(...);
Everything should now load via asynchronous mode.
这样,所有的东西都将通过异步的模式加载
Deployment 部署
It's important to note that dynamic loading should only be used during development on your local machines. During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes the whole process of transitioning from / to between development / maintenance and production as easy as possible. Internally Ext.Loader.history maintains the list of all dependencies your application needs in the exact loading sequence. It's as simple as concatenating all files in this array into one, then include it on top of your application.
一点很重要,动态加载只能在开发的时候在本机上使用。产品发布的时候,所有的依赖最好是组合成一个独一的JavaScript文件。Ext.Loader使项目从开发维护发布之间转换变得很容易。在内部,Ext.Loader.history控制了你的项目所有依赖的加载顺序的列表。把这个列表中的所有依赖压缩成一个,然后把它包含在你项目的最顶部。
This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
这个处理过程将会使用SenchCommand自动完成。
ExtJS笔记 Ext.Loader的更多相关文章
- ExtJS笔记 Ext.data.Types
This is a static class containing the system-supplied data types which may be given to a Field. Type ...
- ExtJS笔记 Ext.data.Model
A Model represents some object that your application manages. For example, one might define a Model ...
- extjs笔记
1. ExtJs 结构树.. 2 2. 对ExtJs的态度.. 3 3. Ext.form概述.. 4 4. Ext.TabPanel篇.. 5 5. Functio ...
- Extjs4 -- Ext.loader命名空间的配置
初次使用extjs4的版本,在配置学习Ext.Loader()进行js文件的动态加载机制,由于各种原因导致多次失败,纠结2天,现将解决时出现的问题及需要注意事项进行记录 开发环境myeclipse8. ...
- ExtJS笔记3 MVC Architecture
MVC Architecture MVC架构 Contents File Structure Creating the application in app.js Defining a Contr ...
- Ext.Loader
Ext.Loader是Ext JS4动态加载的核心,等价于Ext.require简写. Ext.Loader支持异步和同步加载的方法. 异步 优点: 1.跨域 2.不需要web服务器 3.调试方便(可 ...
- Ext4报错Uncaught Ext.Loader is not enabled
提示: Uncaught Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing requ ...
- sencha警告:[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.field.Text'
chrome开发者工具下提示: [WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.field.Text'; consider addi ...
- ExtJS学习-----------Ext.Object,ExtJS对javascript中的Object的扩展
关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...
随机推荐
- Codeforces 543D Road Improvement(树形DP + 乘法逆元)
题目大概说给一棵树,树的边一开始都是损坏的,要修复一些边,修复完后要满足各个点到根的路径上最多只有一条坏的边,现在以各个点为根分别求出修复边的方案数,其结果模1000000007. 不难联想到这题和H ...
- java unicode转中文
public static String unicodeToString(String str) { Pattern pattern = Pattern.compile("(\\\\u(\\ ...
- 【原】iOS学习39网络之数据请求
1. HTTP和HTTPS协议 1> URL URL全称是Uniform Resource Locator(统一资源定位符)通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位 ...
- ccc 播放动画
cc.Class({ extends: cc.Component, properties: { anim:cc.Animation, }, // use this for initialization ...
- XIII Open Cup named after E.V. Pankratiev. GP of SPb
A. Graph Coloring 答案为$1$很好判,为$2$只需要二分图染色,对于$3$,首先爆搜哪些边要染成第$3$种颜色,然后二分图染色判定即可. B. Decimal Fraction 枚举 ...
- 洛谷 P1074 靶形数独 Label:search 不会
题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教, Z 博士拿出了他最近发明的 ...
- 【FZU】1977 Pandora adventure
http://acm.fzu.edu.cn/problem.php?pid=1977 题意:n×m的网格,有3种格子,'O'必须经过.'*'可以选择经过.'X'不能经过.现在要求路径经过所有'O'且是 ...
- JS:操作样式表3:内联和外链样式
var box = document.getElementById("box"); box.style.属性;只能读取修改行内样式. //访问元素样式2,对外链样式表进行操作 do ...
- 【noiOJ】p6253
t6253:用二分法求方程的根 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 用二分法求下面方程在(-10, 10)之间的一个根. 2x3- 4x2+ 3x ...
- 在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke
今天关闭一个窗体,报出这样的一个错误"在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke.",这个不用多想,肯定是那个地方没有释放掉.既然碰到这个问题, ...