参考文章:
http://blog.csdn.net/fanpeii/article/details/7085704
http://www.cnblogs.com/youring2/p/3274135.html
看了文章之后照着做了感觉还是 有些地方不好理解。
★ExtJS 中的动态加载
Ext 中create方法的英文描述:
Instantiate a class by either full name, alias or alternate name.
If Ext.Loader is enabled and the class has not been defined yet, it will attempt to load the class via synchronous loading.
如果Ext.loader 可用,且类还没有被定义,它将试图通过同步加载来加载类
code文件夹 首先 主页面 index.html
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
- <script type="text/javascript" src="../../bootstrap.js"></script>
- <script type="text/javascript" src="test_require.js"></script>
- </head>
- <body>
- <button id='buttons' >click me </button>
- </body>
- </html>
- (function(){
- Ext.Loader.setConfig({
- enabled:true,//启用这个机制
- });
- Ext.onReady(main);
- function main()
- {
- Ext.get("buttons").on("click",function(){//获得按钮的DOM对象 他放在onReady中才有效
- var win=Ext.create("ux.window",{//这里控制路径名 等同于ux/window.js
- });
- win.show();
- });
- };
- })();
- // JavaScript Document
- Ext.define('ux.window',{//这里的名称一定要与test_require.js中的一致
- extend:'Ext.window.Window',
- height:300,
- width:300,
- title:'fanpei'
- })
-----------------------------------------------------------------------------------------------
(1)运行正常
访问 路径http://localhost:8080/TestExt4.2/code/ux/window.js?_dc=1418201832574
(2)注释掉 test_require.js中的 以下部分,运行正常。
- Ext.Loader.setConfig({
- enabled:true,//启用这个机制 (Whether or not to enable the dynamic dependency loading feature. Defaults to:
false
) - });
说明:这种情况下 设置enabled:true还是不设置 并不影响
(3)修改 test_require.js中 var win=Ext.create("ux.window" ,.....
ux.window 为ux.window2 出错! 访问 路径http://localhost:8080/TestExt4.2/code/ux/window2.js?_dc=1418202695283
ux.window 为ux2.window 出错! 访问 路径http://localhost:8080/TestExt4.2/code/ux2/window.js?_dc=1418202765152
ux.window 为ux2.window2 出错! 访问 路径http://localhost:8080/TestExt4.2/code/ux2/window2.js?_dc=1418202809078
ux.window 为app.ux.window 出错! 访问 路径 http://localhost:8080/TestExt4.2/code/app/ux2/window2.js?_dc=1418202895060
说明 Ext.create("ux.window" ,.....这样 默认找的路径就是 当前路面下面的 ux文件夹 中的window.js
(4)修改window.js Ext.define('ux.window',{
ux.window改为 ux.window2 ux2.window ux2.window2。
网络访问正常http://localhost:8080/TestExt4.2/code/ux/window.js?_dc=1418203228184
程序报错Error: [Ext.create] Cannot create an instance of unrecognized class name / alias: ux.window
-----------------------------------------------------------------------------------------------
新建文件夹code2 将ux文件夹挪到这,
(1)这时程序报错,找不到文件。 出错!访问路径为http://localhost:8080/TestExt4.2/code/ux/window.js?_dc=1418203693751
(2)此时设置
Ext.Loader.setConfig({
enabled:true, //启用这个机制
paths: {
ux: getRootPath() + "/code2"
}
});
还是报错,但是访问路径已经发生了变化。http://localhost:8080/TestExt4.2/
code2/window.js?_dc=1418203923781
修改ux: getRootPath() + "/code2/ux" 程序正常显示。
(3)修改ux: getRootPath() + "/code2/ux" 中的 ux 为 app。
出错!访问路径为http://localhost:8080/TestExt4.2/code/ux/window.js?_dc=1418204184089 (又回到默认的情况了)
(4) app: getRootPath() + "/code2/ux" 修改 var win=Ext.create("app.window",{......
此时访问正常路径http://localhost:8080/TestExt4.2/code2/ux/window.js?_dc=1418204303668
但是报错Error: [Ext.create] Cannot create an instance of unrecognized class name / alias: app.window
此时修改Ext.define('ux.window',{ ....为 Ext.define('app.window',{
程序可以正常访问。
(5)
app: getRootPath() + "/code2/ux"
var win=Ext.create("app.ux.window",
报错 访问路径:http://localhost:8080/TestExt4.2/code2/ux/ux/window.js?_dc=1418204570164