《Ext JS权威指南》——2.2节配置使用Ext JS库

2.2　配置使用Ext JS库
要使用Ext JS，首先要做的是将Ext JS包里的resources目录、bootstrap.js文件、ext-all.js文件和ext-all-debug.js文件复制到项目目录。接着在页面中head标记部分添加CSS和脚本文件的引用：

<link rel="stylesheet" type="text/css" href="path/resources/css/ext-all.css"/>
<script type="text/javascript" src="path/bootstrap.js"></script>

要注意代码中的path是CSS文件或脚本文件相对于页面文件的路径。例如，页面文件在根目录，resoureces目录在根目录下，bootstrap.js在js目录下，就可这样写：

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
    <script type="text/javascript" src="js/bootstrap.js"></script>

如果熟悉Ext JS 2或Ext JS 3的，会发现Ext JS 4不是直接加载ext-all.js或ext-all-debug.js，而是加载了bootstrap.js，这有什么好处呢？先看看bootstrap.js的源代码：

(function() {

    var scripts = document.getElementsByTagName('script'),
        localhostTests = [
            /^localhost$/,            /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(:\d{1,5})?\b/ // IP v4
        ],
        host = window.location.hostname,
        isDevelopment = null,
        queryString = window.location.search,
        test, path, i, ln, scriptSrc, match;
    for (i = 0, ln = scripts.length; i < ln; i++) {
        scriptSrc = scripts[i].src;
        match = scriptSrc.match(/bootstrap\.js$/);
        if (match) {
            path = scriptSrc.substring(0, scriptSrc.length - match[0].length);
            break;
        }
    }

    if (queryString.match('(\\?|&)debug') !== null) {
        isDevelopment = true;
    }
    else if (queryString.match('(\\?|&)nodebug') !== null) {
        isDevelopment = false;
    }
    if (isDevelopment === null) {
        for (i = 0, ln = localhostTests.length; i < ln; i++) {
            test = localhostTests[i];
            if (host.search(test) !== -1) {
                isDevelopment = true;
                break;
            }
        }
    }

    if (isDevelopment === null && window.location.protocol === 'file:') {
        isDevelopment = true;
    }

    document.write('<script type="text/javascript" src="' + path + 'ext-all' + ((isDevelopment) ? '-debug' : '') + '.js"></script>');

})();

代码首先使用getElementsByTagName获取页面中所有带有script标记的元素，然后从中找出带有bootstrap.js的标记，最后将bootstrap.js的相对路径取出并保存在变量path中。
接着判断url的参数中是否有“debug”字符，例如，出现http://localhost/index.html? debug，则设置isDevelopment 为true。否则检测是否有“nodebug”字符，如果有，设置为false。如果以上两个条件都不符合，isDevelopment 还是初始值null，就要判断url的域名是否是“localhost”或IPv4地址，如果是，则isDevelopment设置为true。
如果isDevelopment是null且当前的url的协议是“file：”，则将isDevelopment 设置为true。如果isDevelopment为true时，则加载ext-all-debug.js文件，否则加载ext-all.js文件。
通过bootstrap.js，可自动控制加载ext-all-debug.js文件或ext-all.js文件，不用我们自己去修改script标记，非常方便。但如果你觉得自己修改方便，也可以使用Ext JS旧版的方式加载脚本文件。不过bootstrap.js有个缺点，就是把所有IPv4地址都划归为使用调试文件的范围，不太符合国内的情况。因为在内网，应用也多半是使用IP地址访问的。不过，根据自己的情况去修改bootstrap.js也是很方便的。
如果想动态加载Ext JS库，就需要在页面中先加载builds目录下的Ext-core.js或Ext.-core-debug.js文件，然后在onReady函数外添加以下代码：

Ext.Loader.setConfig({enabled: true});
        Ext.Loader.setPath({//加载路径配置对象});
        Ext.require([
            'Ext.grid.*',
        …
        //需要加载的库
        ]);
        Ext.onReady(function(){
            //代码
        });

Loader对象的setConfig方法设置的enabled属性的作用是，开启动态加载的依赖加载功能。该功能的作用是在加载类库文件的时候，根据其依赖情况加载它需要的类库，其默认值是false，这是因为一般情况下Ext JS的库文件都是一次性全部加载的，很少用到动态加载。试想一下，Ext JS类库有200多个文件，在无法预知要加载多少类库的情况下，不断地向服务器请求100多个类库甚至全部200多个类库，那是很吓人的，不但增加了服务器的负担，客户也要一直等待类库的加载，这不是好的方法，所以不推荐使用此方法。
Loader对象的setPath方法是用来设置加载路径的，这在4.5节中会讲述。接着就是使用Ext.require方法请求加载类库了。