Ext.Loader

Files
Loader.js

Ext.Loader是Ext JS 4+动态加载新依赖的核心。最常用的是通过Ext.require来简写它。 Ext.Loader支持异步和同步加载，并且能通过开发流程来充分利用它们的优势。我们将讨论每种方法的优点和缺点:

异步加载

优点:
- 跨域（Cross-domain）
- 可以不需要Web服务器: 你可以通过文件系统协议运行应用程序 (例: file://path/to/your/index.html)
- 尽可能达到最佳调试体验: 错误消息配有确切的文件名和行号
缺点:
- 需要提前指定依赖关系

方法 1: 明确地包含你所需要的:

// 语法
Ext.require({String/Array} 表达式);

// 例子: 单例别名
Ext.require('widget.window');

// 例子: 单例类名
Ext.require('Ext.window.Window');

// 例子: 多种 别名 / 类名 混合
Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);

// 通配符
Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);

方法 2: 显示排除不需要的引用组件:

// 语法: 注意它必须是这样的表达式。
Ext.exclude({String/Array} 表达式).require({String/Array} 表达式);


// 除了Ext.data.*，包括所有部件
Ext.exclude('Ext.data.*').require('*');

// 除了widget.checkbox*,包括所有部件
// 这将匹配 widget.checkbox, widget.checkboxfield, widget.checkboxgroup, 等组件.
Ext.exclude('widget.checkbox*').require('widget.*');

同步加载需求

优点:
- 不需要预先指定依赖关系，这始终是实用的，其中包括ext-all.js
缺点:
- 因为不显示文件名称，所以没有好的调试体验 (除非使用Firebug调试)
- 跨域XHR限制，所以引用的必须是在同一个域
- 需要一个Web服务器，原因同上

有个简单的规则: 可以使用Ext.create实例一切类，而不使用'new'关键字

Ext.create('widget.window', { ... }); // 代替 new Ext.window.Window({...});

Ext.create('Ext.window.Window', {}); // 同上，使用完整的类名称，而不是别名

Ext.widget('window', {}); // 同上，如果你需要的是传统的 `xtype`

Ext.ClassManager会自动检查给定的类名/别名是否已经存在。如果不存在，Ext.Loader将自动切换到同步模式并且自动加载给定的类和它的所有依赖关系。

混合加载 - 两全其美

它具有异步和同步加载的所有优势。开发流程很简单：

第1步：开始写你的应用程序中使用同步的方法。

Ext.Loader 会自动获取所有需要的依赖关系。例如：

Ext.onReady(function(){
    var window = Ext.createWidget('window', {
        width: 500,
        height: 300,
        layout: {
            type: 'border',
            padding: 5
        },
        title: '您好对话框',
        items: [{
            title: '导航',
            collapsible: true,
            region: 'west',
            width: 200,
            html: 'Hello',
            split: true
        }, {
            title: 'TabPanel',
            region: 'center'
        }]
    });

    window.show();
})

Step 2: 第2步：在这个过程中，当你需要更好的调试能力，观察控制台这样的警告：

[Ext.Loader] 同步加载'Ext.window.Window'在代码前考虑添加 Ext.require('Ext.window.Window') ClassManager.js：432

[Ext.Loader] 同步加载'Ext.layout.container.Border'在代码前考虑添加 Ext.require('Ext.layout.container.Border')

   只需复制并粘贴上面的代码到'Ext.onReady'中，例如：

Ext.require('Ext.window.Window');
Ext.require('Ext.layout.container.Border');

Ext.onReady(...);

现在都通过异步模式加载。

部署

重点要注意的是：只可用于在您本地计算机上的开发过程中动态加载。在生产过程中，所有的依赖关系应该合并为一单独的JavaScript文件。 Ext.Loader 使整个过程的转变，从（开发）到（维护）再到（生产）尽可能容易。在 Ext.Loader.history 内部维持你的应用程序需要的所有依赖的加载顺序列表。

这是简单的串联，把这个数组中的所有文件合为一体，然后将其包含在您的应用程序中。

整个过程将由Sencha Command（煎茶命令）自动完成，自动释放Ext JS 4 的相关文件。

Defined By

Config options

Ext.Loader

disableCaching : Boolean

禁用缓存附加脚本文件的当前时间戳，以防止缓存。 ...

禁用缓存附加脚本文件的当前时间戳，以防止缓存。

Defaults to: true

Ext.Loader

disableCachingParam : String

禁用缓存参数获取参数的名称缓存buster's时间戳。 ...

禁用缓存参数获取参数的名称缓存buster's时间戳。

Defaults to: "_dc"

Ext.Loader

enabled : Boolean

启用是否启用依赖的动态加载功能。 ...

启用是否启用依赖的动态加载功能。

Defaults to: false

Ext.Loader

garbageCollect : Boolean

垃圾回收设置True准备异步的脚本标记为垃圾回收 (只有当 preserveScripts 为 false 才有效) ...

垃圾回收设置True准备异步的脚本标记为垃圾回收 (只有当 preserveScripts 为 false 才有效)

Defaults to: false

Ext.Loader

paths : Object

路径测绘从命名空间的文件路径 { 'Ext': '.', //这是默认设置， Ext.layout.container.Container 将加载 //./layout/Container....

路径测绘从命名空间的文件路径

{
    'Ext': '.', //这是默认设置， Ext.layout.container.Container 将加载
                //./layout/Container.js

    'My': './src/my_own_folder' // My.layout.Container 将加载
                                // ./src/my_own_folder/layout/Container.js
}

注意所有的相对路径是相对于当前文件。如果没有指定，例如 Other.awesome.Class 简单加载 ./Other/awesome/Class.js

Defaults to: {"Ext": "."}

Ext.Loader

preserveScripts : Boolean

保留脚本错误删除和可选的 garbage-collect 异步加载脚本, True 保留脚本元素浏览器兼容性和更好的负载性能。 ...

保留脚本错误删除和可选的 garbage-collect 异步加载脚本, True 保留脚本元素浏览器兼容性和更好的负载性能。

Defaults to: true

Ext.Loader

scriptChainDelay : Boolean

脚本链延迟毫秒延迟的异步脚本注入（一些用户代理防止堆栈溢出） 'false' 禁用延迟，但可能会增加堆栈的负载。 ...

脚本链延迟毫秒延迟的异步脚本注入（一些用户代理防止堆栈溢出） 'false' 禁用延迟，但可能会增加堆栈的负载。

Defaults to: false

Ext.Loader

scriptCharset : String

脚本字符集指定编码的动态脚本内容可选字符集。 ...

脚本字符集指定编码的动态脚本内容可选字符集。

Defined By

Properties

Ext.Loader

classNameToFilePathMap : Objectprivate

Ext.Loader

config : Objectprivate

Configuration 配置

Ext.Loader

documentHead : Objectprivate

Ext.Loader

hasFileLoadError : Booleanprivate

Defaults to: false

Ext.Loader

history : Array

根据类名来跟踪依赖项的加载顺序。每次异步加载不一定相同历史

Ext.Loader

isClassFileLoaded : Objectprivate

已处理的文件维护清单，以便他们永远不会双重加载

Ext.Loader

isFileLoaded : Objectprivate

Ext.Loader

isInHistory : Objectprivate

是否是历史记录

Ext.Loader

isLoading : Booleanprivate

该标志指示是否仍有正在加载的文件

Defaults to: false

Ext.Loader

numLoadedFiles : Numberprivate

Defaults to: 0

Ext.Loader

numPendingFiles : Numberprivate

Defaults to: 0

Ext.Loader

optionalRequires : Objectprivate

包含引用的类 uses 属性.

Ext.Loader

queue : Objectprivate

保持数组中的所有依赖关系。在阵列中的每项的格式是一个对象： { requires: [...], // 此数组项所需的类 callback: function() { ... ...

保持数组中的所有依赖关系。在阵列中的每项的格式是一个对象：

{
     requires: [...], // 此数组项所需的类
     callback: function() { ... } // 当所有指定的类要求存在时，执行该函数
}

Ext.Loader

readyListeners : Objectprivate

保持完全加载时所需的所有脚本执行的侦听器列表

Ext.Loader

requiresMap : Objectprivate

数组中所依赖的类的全类名的地图。

Ext.Loader

scriptsLoading : Numberprivate

通过loadScript加载的脚本数目

Defaults to: 0

Ext.Loader

syncModeEnabled : Booleanprivate

Defaults to: false

Defined By

Methods

Ext.Loader

addUsedClasses( Object classes )private

确保在uses属性加载任意引用的类。

Parameters

classes : Object

Ext.Loader

cleanupScriptElement( Object script, Object remove, Object collect )private

Parameters

script : Object
remove : Object
collect : Object

Ext.Loader

disableCacheBuster( Boolean disable, [String path] )private

打开或关闭"cache buster"（缓存克星）动态加载的脚本。通常情况下动态加载的脚本有一个额外附加的查询参数，以避免陈旧的缓存脚本。此方法可以用于禁用此机制，主要是用于测试。这里是使用一个Cookie。

Parameters

disable : Boolean
如果为True来禁用缓存克星。
path : String (optional)
可选的范围的cookie的路径。

Defaults to: "/"

Ext.Loader

exclude( Array excludes ) : Object

明确排除被加载的文件。使用时结合广泛表达式时有效。可以用require 和 exclude 方法, 例如:

Ext.exclude('Ext.data.*').require('*');

Ext.exclude('widget.button*').require('widget.*');

Parameters

excludes : Array
排除

Returns

Object
object 包含require 方法链接

Ext.Loader

getConfig( String name ) : Object

得到的配置值对应到指定的名字。如果没有给出名称，将返回的配置对象

Parameters

name : String
配置属性名称

Returns

Object

Ext.Loader

getPath( String className ) : String

将一个类名文件路径通过添加适当的前缀并且转换.'s 为 /'s. 例如：

Ext.Loader.setPath('My', '/path/to/My');

alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'

请注意，更深的命名空间层次，如果有明确规定，优先解决。例如：

Ext.Loader.setPath({
    'My': '/path/to/lib',
    'My.awesome': '/other/path/for/awesome/stuff',
    'My.awesome.more': '/more/awesome/path'
});

alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'

alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'

alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'

alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'

Parameters

className : String
类名

Returns

String
path 路径

Ext.Loader

getPrefix( String className )private

Parameters

className : String
类名

Ext.Loader

historyPush( String className )private

Parameters

className : String
类名

Ext.Loader

injectScriptElement( Object url, Object onLoad, Object onError, Object scope, Object charset )private

注入脚本元素到文件的头部，作为调用onLoad和onError的依据

Parameters

url : Object
onLoad : Object
onError : Object
scope : Object
charset : Object

Ext.Loader

isAClassNameWithAKnownPrefix( String className )private

Parameters

className : String
类名

Ext.Loader

loadScript( Object/String options )

加载指定的脚本URL和调用提供的回调。如果这个方法在Ext.isReady前调用,脚本的加载将延迟。这可以被用来加载任意脚本可能包含更多的Ext.require调用。

Parameters

options : Object/String
选项或简单的URL来加载。
- url : String
  加载脚本的URL。
- onLoad : Function (optional)
  回调函数，调用成功加载。
- onError : Function (optional)
  回调函数，调用失败加载。
- scope : Object (optional)
  （this`）范围所提供的回调。

Ext.Loader

loadScriptFile( Object url, Object onLoad, Object onError, Object scope, Object synchronous )private

加载脚本文件，支持异步和同步的方法

Parameters

url : Object
onLoad : Object
onError : Object
scope : Object
synchronous : Object

Ext.Loader

onFileLoadError( Object className, Object filePath, Object errorMessage, Object isSynchronous )private

Parameters

className : Object
filePath : Object
errorMessage : Object
isSynchronous : Object

Ext.Loader

onFileLoaded( String className, String filePath )private

Parameters

className : String
类名
filePath : String
文件路径

Ext.Loader

onReady( Function fn, Object scope, Boolean withDomReady )

添加新的侦听器执行时所需的所有脚本完全加载

Parameters

fn : Function
要执行的回调函数
scope : Object
(this)回调函数的执行范围
withDomReady : Boolean
document dom就绪无论如何要等待document dom就绪

Ext.Loader

refreshQueue( )private

刷新数组中的所有项目。如果项目的依赖关系存在循环，它会执行回调并再次调用refreshQueue函数。当队列为空时，触发onReady ...

刷新数组中的所有项目。如果项目的依赖关系存在循环，它会执行回调并再次调用refreshQueue函数。当队列为空时，触发onReady

Ext.Loader

removeScriptElement( Object url )private

Parameters

url : Object

Ext.Loader

require( String/Array expressions, Function fn, Object scope, String/Array excludes )

加载所有的类名和直接依赖关系;在可选的范围内，可以执行给定的回调函数。这种方法是由 Ext.require 为别名

Parameters

expressions : String/Array
表达式表达式可以是字符串或字符串数组
fn : Function
(可选) 回调函数
scope : Object
(可选) (this) 的回调函数的执行范围
excludes : String/Array
(可选)排除正在实用的表达式

Ext.Loader

setConfig( Object config ) : Ext.Loader

配置加载器。这应该放在ext-(debug).js调用之后，并且在Ext.onReady之前。即:

<script type="text/javascript" src="ext-core-debug.js"></script>
<script type="text/javascript">
    Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'My': 'my_own_path'
      }
    });
</script>
<script type="text/javascript">
    Ext.require(...);

    Ext.onReady(function() {
      // 应用程序的代码在这里
    });
</script>

参见配置选项Ext.Loader清单的属性