Ext.Loader singleton

 Ext.Loader  singleton

Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+.(Ext.Loader在ExtJs4+中是新的动态依赖加载能力的核心。) It is most commonly used via the Ext.require shorthand.(最一般的用法是通过Ext.require快捷方法。) Ext.Loader supports both asynchronous and synchronous loading approaches, and leverage their advantages for the best development flow.(Ext.Loader同时支持同步和异步加载方法和利用它们的优势产生最好的开发模式。) We'll discuss about the pros and cons of each approach:(我们将讨论每种方法的优缺点)

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 / aliashas already existed on the page. (在后台，Ext.ClassManager会自动检查给定的类名和别名是否已经在页面已经存在。)If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given class and all its dependencies.(如果没有，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.createWidget('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.(在作为产品发布的时候，所有的依赖最好是组合成一个独一的JavaScript文件) Ext.Loader makes the whole process of transitioning from / to between development / maintenance and production as easy as possible. (Ext.Loader使项目从开发维护发布之间转换变得很容易)Internally Ext.Loader.history maintains the list of all dependencies your application needs in the exact loading sequence. (在内部，Ext.Loader.history控制了你的项目所有依赖的确切的加载顺序的列表)It's as simple as concatenating all files in this array into one, then include it on top of your application.(这是很简单的，把数组中所有的文件链接成一个，让把它包含在你项目的最顶部。)

This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.(这个处理过程将会自动需要的类库，在Extjs4的最终版本将会发布和编写相关的文档。)111