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

      在此首先感谢CSDN的文顺 网友,是他提醒了我需要写这文的。

      在Loader对象中,动态加载是使用getPath方法获取下载路径的,其代码如下:

getPath :   function ( className )   {
        var   path   =   ' ' ,
                paths   =   this . config . paths ,
                prefix   =   this . getPrefix ( className ) ;
 
        if   ( prefix . length   >   0 )   {
                if   ( prefix   = = =   className )   {
                        return   paths [ prefix ] ;
                }
10   
11                  path   =   paths [ prefix ] ;
12                  className   =   className . substring ( prefix . length   +   1 ) ;
13          }
14   
15          if   ( path . length   >   0 )   {
16                  path   + =   ' / ' ;
17          }
18   
19          return   path . replace ( / / / / . / // g,   '/')   +   className.replace(//./g,   "/")   +   '.js';
20  } ,
21   

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

paths :   {
        ' Ext ' :   ' . '
}
 

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

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

getPrefix :   function ( className )   {
        var   paths   =   this . config . paths ,
                prefix ,   deepestPrefix   =   ' ' ;
 
        if   ( paths . hasOwnProperty ( className ) )   {
                return   className ;
        }
 
        for   ( prefix   in   paths )   {
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          return   deepestPrefix ;
18  } ,
19   

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

' 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控制台输入以下命令:

Ext . Loader . setPath ( {
        " My " : " ./app " ,
        " My.app " : " ./app " ,
        " Ext " : ' . / lib / src '
} )
console . dir ( Ext . Loader . config . paths ) ;
 

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

       运行后,在控制台可看到以下输出:

Ext         " ./lib/src/ "
My           " ./app "
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获得的路径将是:

. / app / base . js
. / app / user . js
. / app / product . js
. / lib / scr / ux / plugin . js
 

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

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

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

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

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

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

原文地址:https://www.cnblogs.com/hainange/p/6334293.html