ExtJS 4中动态加载的路径设置

Extjs4动态加载的路径设置方法。在Loader对象中，动态加载是使用getPath方法获取下载路径的，其代码如下：

 

1. getPath : function(className){
2.     varpath='',
3.     paths=this.config.paths,
4.     prefix=this.getPrefix(className);
5. 
   
6.     if(prefix.length>0){
7.         if(prefix===className){
8.             returnpaths[prefix];
9.         }
10. 
    
11.         path=paths[prefix];
12.         className=className.substring(prefix.length+1);
13.     }
14. 
    
15.     if(path.length>0){
16.         path+='/';
17.     }
18.     return   path . replace ( / / / / . / // g,   '/')   +   className.replace(//./g,   "/")   +   '.js'; 
19. }

从变量paths的定义可知，预设路径保存在Loader对象的config对象的paths对象里的，其默认配置如下：

 

1. paths:{'Ext':'.'}

也就是说，默认Ext的加载路径是根目录。

代码先使用getPrefix方法获取类名的前缀，其代码如下：

 

1. getPrefix:function(className){
2.     varpaths=this.config.paths,
3.     prefix,deepestPrefix='';
4. 
   
5.     if(paths.hasOwnProperty(className)){
6.         returnclassName;
7.     }
8. 
   
9.     for(prefixinpaths){
10.         if(paths.hasOwnProperty(prefix)&&prefix+'.'===className.substring(0,prefix.length+1)){
11.             if(prefix.length>deepestPrefix.length){
12.                 deepestPrefix=prefix;
13.             }
14.         }
15.     }
16. 
    
17.     returndeepestPrefix;
18. },

代码会检查paths对象中是否包含有以类名为属性名称的属性，如果有，说明该类有直接路径，直接返回就可以了。例如，定义了一个类名为“My.App.User”的类，在paths对象存在以下定义：

 

1. 'My.App.User':'../app/user.js'

说明“My.App.User”类不用计算其下载路径，直接根据paths对象中的定义去下载文件就可以了。

如果不存在直接路径，就先找带有路径的前缀，例如“My.App.User”类，如果在paths对象中只 存在“My”的路径定义，则返回前缀“My”。如果paths对象既存在“My”和“My.App”的路径定义，则返回前缀“My.App”。

如果以上都不存在，则返回空字符串。

回到getPath方法，如果返回的前缀不是空字符串，则检查前缀是否与类型相同，如果相同，从paths对象中取出路径直接返回。否则取出前缀的路径，并把类名的前缀部分去掉。

接着判断路径（path）是否存在，如果不存在，给路径加一个“/”。

最后把类名转换为带“.js”的文件名加上路径返回。要注意的是，如果类名中还带有“.”，那么会将“.”转换为“/”，也就是当成路径的一部分。

要预设加载路径，可使用Loader对象的setPath方法。代码很简单，就是将配置对象的成员复制到paths路径里，在此就不讲述了。

下面在浏览器中打开ExtJS 4的API文档，然后在Firebug控制台输入以下命令：

 

1. Ext.Loader.setPath({
2.     "My":"./app",
3.     "My.app":"./app",
4.     "Ext":'./lib/src'
5. })
6. console.dir(Ext.Loader.config.paths);

命令使用setPath方法预设了“My”、“My.app”和“Ext”的加载路径。

运行后，在控制台可看到以下输出：

 

1. Ext"./lib/src/"
2. My"./app"
3. My.app"./app/"

 该设置是根据一般的项目结构设置的路径。一般情况下都会加载ext-all.js，因而不用设置Ext目录也行，但是如果你喜欢全部动态加载，也可以按示例代码进行设置，把ExtJS的源代码放到lib的src目录里。一般项目中，自定义的类可以放到app目录下，类名的命名空间可以随便设置，只要在paths对象中指定其路径就可以了。例如定义了“My.base”、“My.app.user”和“My.app.product”等类，以及使用“Ext.ux.plugin”等Ext插件或扩展，使用getPath获得的路径将是：

 

1. ./app/base.js
2. ./app/user.js
3. ./app/product.js
4. ./lib/scr/ux/plugin.js

现在的问题是插件也要放到src目录下，因而为了方便，你可以将插件另外定义插件的目录，例如：

 

1. Ext.Loader.setPath("Ext.ux","./lib/ux");

这样就可以把插件放到lib下的ux目录了。

经过以上的设置，在OnReady方法前使用Ext.require方法就可顺利的加载库文件了，例如：

 

1. Ext.Loader.setConfig({enabled:true});
2. Ext.Loader.setPath({
3.     "My":"./app",
4.     "My.app":"./app",
5.     "Ext":'./lib/src',
6.     "Ext.ux":"./lib/ux"
7. });
8. Ext.require([
9.     'My.base',
10.     'My.app.user',
11.     'My.app.product',
12.     'Ext.ux.plugin'
13. ]);
14. Ext.onReady(function(){
15. //应用代码;
16. });

代码中，setConfig 方法设置eabled属性的作用是开启动态加载中的依赖加载功能。