Extjs的Requiers作用

    有的時候項目中要寫一些擴展組件，隨着擴展組件的增加，會造成有的頁面需要使用，而有的頁面不需要使用的問題，這對組件的js文件的引用造成了煩惱：如果每個頁面都去引用的時候會造成瀏覽器打開頁面的流量的增加而影響資源，如果需要的時候引用管理起來又很麻煩，Extjs4.0幫我們解決了這個問題，那就是Ext.requires。它可以實現根據我們的需要動態加在所需要的組件文件，很靈活也很方便。下面我們用例子進行講解。

項目目錄如下圖所示：

    webapp下resources\ux目錄用來存放我們的組件資源。

main.js文件爲頁面所引用的文件

(function(){
    Ext.Loader.setConfig({
        enabled:true,
        paths:{
            'App.ux':'resources/ux'//設置目錄映射'App.ux'命名空間的將去resources/ux下尋找
        }
    });
    Ext.onReady(function(){

        var MyWin = Ext.create('App.ux.MyWin',{

            requires:['App.ux.MyWin'] //在這裏這樣寫也是可以的requires:['MyWin']

        });
        Ext.get('myButton').on('click',function(){
            MyWin.show();

        })

    });
})();

起初在onReady方法前要做一個Ext.Loader.setConfig的配置，按照我們的事例定義了，命名空間‘App.ux’映射物理路徑‘resources/ux’凡是App.ux開頭的都回去resources/ux路徑下去尋找。

我們Ext.create方法引用的App.ux.MyWin其實對應的是定義的類路徑，也就是自定義組件的路徑，剛纔介紹過了，App.ux映射了resources/ux路徑，在這裏MyWin映射了MyWin.js文件，如果在這裏將MyWin改爲myWin的話，瀏覽器將會尋找resources/ux/myWin.js文件，這樣就找不到對應的文件了。報錯信息如下：

ux\MyWin.js內容如下：

Ext.define('App.ux.MyWin',{
    extend:'Ext.window.Window',
    width:400,
    height:300,
    title:'330000',
    initComponent:function(){
        this.callParent(arguments);
    }
});

這樣就可以了~~不知道說清楚了沒有，希望大家批評指正。