ext中引用ux_ExtJS 4中动态加载的路径设置

在此首先感谢CSDN的文顺

网友，是他提醒了我需要写这文的。

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

1

getPath

:

function

(

className

)

{

2

var

path

=

'

'

,

3

paths

=

this

.

config

.

paths

,

4

prefix

=

this

.

getPrefix

(

className

)

;

5

6

if

(

prefix

.

length

>

0

)

{

7

if

(

prefix

=

=

=

className

)

{

8

return

paths

[

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

19

return

path

.

replace

(

/

/

/

/

.

/

//

g,

'/')

+

className.replace(//./g,

"/")

+

'.js';

20

}

,

21

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

1

paths

:

{

2

'

Ext

'

:

'

.

'

3

}

4

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

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

1

getPrefix

:

function

(

className

)

{

2

var

paths

=

this

.

config

.

paths

,

3

prefix

,

deepestPrefix

=

'

'

;

4

5

if

(

paths

.

hasOwnProperty

(

className

)

)

{

6

return

className

;

7

}

8

9

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对象存在以下定义：

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

)

;

7

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

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

1

Ext

"

./lib/src/

"

2

My

"

./app

"

3

My

.

app

"

./app/

"

4

该设置是根据一般的项目结构设置的路径。一般情况下都会加载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

5

现在的问题是插件也要放到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

}

)

;

17

代码中，setConfig

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