(3)Extjs如何动态加载Extjs脚本

最新推荐文章于 2020-12-24 14:38:53 发布
最新推荐文章于 2020-12-24 14:38:53 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： ExtJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandajava/article/details/41848247
版权

参考文章：

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]  view plain copy
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4.         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />  
  5.         <script type="text/javascript" src="../../bootstrap.js"></script>  
  6.         <script type="text/javascript" src="test_require.js"></script>  
  7.     </head>  
  8.     <body>  
  9.       
  10.     <button id='buttons' >click me </button>  
  11.     </body>  
  12. </html>  
在主页面中，我只加载了一个js脚本，也就是test_require.js脚本。其内容如下所示。

[javascript]  view plain copy
  1. (function(){  
  2.     Ext.Loader.setConfig({  
  3.         enabled:true,//启用这个机制     
  4.     });  
  5.       
  6.     Ext.onReady(main);  
  7.        
  8.     function main()  
  9.     {  
  10.         Ext.get("buttons").on("click",function(){//获得按钮的DOM对象 他放在onReady中才有效  
  11.             var win=Ext.create("ux.window",{//这里控制路径名 等同于ux/window.js  
  12.                   
  13.             });                                  
  14.             win.show();                                  
  15.         });  
  16.     };  
  17. })();  
在ux文件中 有一文件叫做window.js
[javascript]  view plain copy
  1. // JavaScript Document  
  2.     Ext.define('ux.window',{//这里的名称一定要与test_require.js中的一致  
  3.         extend:'Ext.window.Window',  
  4.         height:300,  
  5.         width:300,  
  6.         title:'fanpei'  
  7.     })  

-----------------------------------------------------------------------------------------------


（1）运行正常 

访问 路径http://localhost:8080/TestExt4.2/code/ux/window.js?_dc=1418201832574

（2）注释掉 test_require.js中的 以下部分，运行正常。

  1.  Ext.Loader.setConfig({  
  2.         enabled:true,//启用这个机制     (Whether or not to enable the dynamic dependency loading feature. Defaults to: false) 
  3.     });  
访问 路径http://localhost:8080/TestExt4.2/code/ ux/window.js?_dc=1418201832574

说明：这种情况下 设置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

改为app: getRootPath() + "/code2/"
访问正常路径http://localhost:8080/TestExt4.2/ code2//ux/window.js?_dc=1418204653688
报错  [Ext.create] Cannot create an instance of unrecognized class name / alias: app.ux.window
现在修改一下Ext.define('ux.window',{  为Ext.define('app.ux.window',{程序又可以正常运行了
 
总结:说不太清楚，感觉模模糊糊知道了如何运行的，初学ext，日后熟练再回来总结。
    加载器会通过类名类匹配路径中的ux文件夹，然后加载window.js

-----------------------------------------------------------------------------------------------
pandajava
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs3动态加载js源码
08-23
自己由于使用extjs3，开发了一个动态加载js的管理器，类似extjs4的使用方式，但实现方式完全不一样，有兴趣的朋友可以下载后使用，欢迎吐槽
extjs 关于js的动态加载问题
追求卓越，成功就在不经意间追上你
11-10 953
只要不是初学者，都希望自己的js能够动态加载，而不需要开始的时候把所有的js都加载进来导致第一个页面慢如蜗牛。以下是我见过使用过的几种方式（不包含ext4 之后的 那种require的方法，那种方式我还不理解），优劣方面大家自己来评价吧。一般的项目都分为 上，左，中三个部分，当点击左边部分菜单的时候，是一个独立的模块需要动态加载js 方式一： 用iframe来完成 优点：不需要考虑导入js的
extjs6.0 动态加载_动态加载 ExtJS 类库
weixin_42641741的博客
12-24 347
ExtJS 是一个非常优秀的 JS 框架， 由于 ExtJS 自身非常庞大， 用于开发测试的 ext-all-debug.js 文件达到了 3.24M ， 如果是再加载带注释的 ext-all-debug-w-comments.js 则更是达到了 6M ， 可以说是非常庞大了， 因此动态加载 ExtJS 是很有必要的， 接下来就介绍如何对 ExtJS 做动态加载。首先需要先创建一个基本可用的 Ex...
[extjs3.4]延迟、动态加载js文件
wzp1986的专栏
12-25 1252
var aryJS = [ 'Scripts/Ext.lib.Ajax.getConnectionObject.js', 'Scripts/TabCloseMenu.js', 'Scripts/test.js' ]; Ext.Loader.load(aryJS, function() { alert('js injected!'); }, window, true);
Ext6.2 sencha app build 几种报错的解决方法
Liu_Bo1992的博客
07-04 3448
1.页面调试debugger没有删除，汇报一下错误： C2009: YUI Parse Error (identifier is a reserved word =&gt;         debugger;) -- unknown-file:308408:172.app.js里添加requires : ['ExtApp.*','Ext.chart.*']Unrecognized class na...
Extjs入门之动态加载树代码
10-29
以下是一个基本的HTML代码示例，用于加载Extjs库并初始化页面样式： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
ExtJs 动态添加表单
03-25
3. **动态添加字段到表单**： 使用`add`方法将字段添加到表单容器中： ```javascript formPanel.add(textField); formPanel.doLayout(); // 重新布局以显示新添加的字段 ``` 4. **监听和处理事件**： 我们...
3套收藏的ExtJS主题皮肤资源.rar
07-10
这3套主题皮肤分别为红色、橙色和红灰相间的风格，它们不仅扩展了EXTJS的默认蓝色主题，还提供了更多的选择，使开发者能够根据品牌风格或用户喜好调整界面颜色。 在实际应用中，更换ExtJS皮肤通常涉及到以下几个...
Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: layout.card
halimao的博客
09-13 3501
Extjs使用sencha cmd打包时提示错误 Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: layout.card/layout.border
升级到 ExtJS 5的过程记录
weixin_33861800的博客
11-30 238
升级到 ExtJS 5的过程记录 最近为公司的一个项目创建了一个 ExtJS 5 的分支，顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑。由于 Sencha Cmd 的 sencha app upgrade 命令无法正常地讲项目升级至 ExtJS 5 （或许是方式不对） ，所以我的做法是新建一个 ExtJS 5 的项目，然后把 app 包拷贝过去，然后慢慢修复报错...
Ext中new 和create的区别
ˉ-_lishk_-ˉ
10-22 5898
1、在Ext JS 4版本之前，一直使用new关键字创建对象，其语法如下：     new classname([config]) 其中calssname是指类名；config是可选参数，为类的配置对象（config options），类型为JSON对象 2、Ext.create方法是新增的创建对象的方法，其语法如下： Ext.create(classname,
[Ext JS 4] 动态加载
oscar999的专栏
01-21 8640
一次性加载完所有的js 文件， 对于比较大型的项目来说，效率较为低下。可能只是一个简单的首页， 也要几秒甚至十几秒才能出得来。 是否可以在需要的时候才进行加载？ 动态加载， 是Ext JS 4 中新增的特性。 总结一下， 可以通过 1. Ext require 动态加载 2. sencha cmd 定制模组 3. Ext.loader.loadScript 三个方面来实现文件面的性能提示， 除此之外，还可以使用 YUI comperssor 压缩js 或其他方式提示性能。参见 使用yui
Extjs6.2系列之动态设置主页面（MainView）
qq_28504151的博客
02-10 5283
在做qq登录时遇到一个情况，用户在qq的第三方的登录界面授权成功后，qq账号服务框架会打开你设置的回调页面，并将授权信息存储在hash中，由于Extjs只有一个index.html页面，其所有的视图都由js代码在index.html上动态创建出来，这样就不可避免的遇到这样一个问题，如果你在app.js中设置的mainView是你的登录界面（不妨叫做loginView），那么在qq登录成功后，浏览器
关于实现Extjs动态加载类的方式实现
晨港飞燕的专栏
05-26 1149
Extjs4以前的版本没有动态加载类的方式，这样开发程序的时候加载很多的js会导致加载变慢，由于本人一直使用extjs3的版本进行开发，于是简单实现了一个动态加载类的管理器，使用方式与extjs4的方式有些类似，在每一个类中需要使用其他类的时候像java一样先improt再使用。先看使用方式： Java代码   Ext.setPath("ThinkOA", "app");//将
ExtJs4 动态加载(Ext.Loader)
yb305
11-25 3918
项目文件路径图   Js代码   Ext.Loader.setConfig({      enabled: true,      paths : {//'类名前缀':'所在路径'         'App.ux' : 'lib'      }   });   //或者用setPath设置匹配路径   //Ext.Loader.setPath('App.u
java.lang.ClassFormatError unrecognized class file version 解决办法
weixin_33859504的博客
03-29 210
在linux安装好java之后，测试发现java.lang.ClassFormatError unrecognized class file version错误 找了好久，发现是版本号不对，接下来进行修改 首先说说我的安装路径 \usr\jdk1.6.0_07 修改一下bin 如下： cd /usr/bin/ ln -s -f /usr/jdk1.6.0_...
ClassFormatError: xxx (unrecognized class file version)
我相信
01-27 841
./ 执行脚本没报错 crontab 作业执行报错：Exception in thread "main" java.lang.ClassFormatError: SystemInfo (unrecognized class file version) crontab执行环境里 基本没有环境变量。 一些常用的环境变量，添加到脚本里： # java env export JA
EXTJS4快速入门：窗口创建与动态加载
此外，学习笔记还涵盖了关于CSS样式和JavaScript脚本的引用，例如使用`<link>`标签引入EXTJS的CSS样式表`ext-all.css`，以及使用`<script>`标签加载基础库文件`bootstrap.js`和中文语言包`ext-lang-zh_CN.js`。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值