《ExtJS權威指南》——2.2節配置使用ExtJS庫

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$/,            /(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})?/ // 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方法請求載入類庫了。