在此首先感谢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属性的作用是开启动态加载中的依赖加载功能。
分享到:
相关推荐
ExtJS 4中动态加载的路径设置 Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4...
Vs2005+Access+Asp.net+Extjs简单三层架构源码 由51编程网站提供,代码由51编程-代码器自动生成。 共生成5种文件格式: Model: 实体层 BLL : 逻辑层 Dal: 数据层(主键自动增长,新增时都需要屏蔽) Ext.aspx: ...
将 public/extjs 部分更改为要安装 Ext JS 4 GPLv3 的相对路径。 $ cd your-project-dir $ git submodule add git@github.com:Projacto/extjs-4-gpl.git public/extjs $ git submodule update --init 文档 有关,...
}自定义配置如果需要自定义ExtJs的app.js路径'controllerMap' => [ 'site' => [ 'class' => '\wsl\rbac\controllers\SiteController', 'extJs' => [ 'appPath' => '/app.js', ], ], ... ],注: ...
将存储Ext.Loader到系统上的某个位置,并将带有前缀的路径添加到Ext.Loader : Ext.Loader.setPath({ 'Ext.ux.upload' : '/my/path/to/extjs-upload-widget/lib/upload' }); 基本用法 在最简单的情况下,您只需...
用法确保您已在 app.js 文件中设置用户扩展的路径 Ext . Loader . setPath ( { 'Ext.ux' : 'path/to/ux' } ) ; 确保将转换器添加到您要使用它的类的requires列表中 Ext . define ( 'SomeClass' , { requires : [ '...
包加载器Ext JS 动态包加载器要求这个包被 Ext JS 应用程序和 Sencha Cmd 6.5 使用安装 下载 。 我们建议将 Ext JS 解压到您的主目录中的"sencha-sdks"文件夹中。在 Cmd 应用程序中使用只需将package-loader添加到'...
将 public/extjs 部分更改为您要安装 Ext JS 5 GPLv3 的相对路径。 $ cd your-project-dir $ git submodule add git@github.com:Projacto/extjs-5-gpl.git public/extjs $ git submodule update --init 文档 有关...
extjs4.1不支持spket的代码提醒和自动完成功能,主要是sdk.jsb3这个文件有很多路径都弄错了,把platform和src的目录修改完,在重新加载就可以。
4.5 动态加载的路径设置 / 163 4.6 综合实例:页面计算器 / 165 4.7 本章小结 / 169 第5章 ext js的事件及其应用 / 170 5.1 概述 / 170 5.2 浏览器事件 / 170 5.2.1 绑定浏览器事件的过程:ext.eventmanager ...
Extjs示例:费用分析器该“费用分析器”是“ ”一书中详细介绍的示例项目之...如果CDN不起作用,则可能需要更新index.html中的ExtJS库URL,并指向本地ExtJS库路径。 《 》一书中介绍了ExtJS 6和Sencha Cmd的安装指南。
1、删除原有的【路径】和【选择】按钮,修改为左键选择,右键画线; 2、修改节点属性配置窗口,修改为tabpanel方式,同时添加字段权限配置功能; 3、【添加环节】按钮目前点击一次只可以添加个环节; 三、代码及...
只要加载好extjs2.0,login.html中加载的元素路径正常就OK
注意dropins和eclipse目录之间还有一层,否则可能会加载不上,eclipse helios 3.6测试没问题,其他版本没经过测试,使用的时候在项目中添加javascript支持,并在Include Path 中添加相应的库即可,如没加载上可以...
添加联系人 更改联系资料 删除联系人 显示当前联系人 排序联系人 将数据保存在浏览器的本地存储中 确认表格 按姓名,姓氏,电子邮件,电话号码搜索 演示版 您可以在我的网站上测试应用程序: : 跑步 克隆存储库 cd...
下面这个是菜单管理模块,功能可以对标 Vue 版本的菜单支持模块,用于管理模块和源代码路径的映射关系,如下图所示。 ![输入图片说明](image/ext/7.png) 第四个模块是管理类型管理模块,也就是通讯录的类型,如...