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();             
              
        })  
          
    });  
})();  

 

01.起初在onReady方法前要做一个Ext.Loader.setConfig的配置，按照我们的事例定义了，命名空间‘App.ux’映射物理路径‘resources/ux’凡是App.ux开头的都回去resources/ux路径下去寻找。 

01.我们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);  
    }     
});  

 

这样就可以了~~不知道说清楚了没有，希望大家批评指正。