ExtJS4中的requires使用方法示例介绍


Posted in Javascript onDecember 03, 2013

ExtJS4的requires是新增的机制,主要是实现异步加载机制。这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间。

requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候使用Ext.require进行加载。

文件的存储结构如下所示:
ExtJS4中的requires使用方法示例介绍 
ux文件夹和lesson2.htm和lesson22.js在相同的目录下,而使用到的MyWin.js存放在ux的文件夹中。

在lesson2.html中的代码如下所示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GBK"> 
<title>extjs4 desktop</title> 
<!-- css --> 
<link rel="stylesheet" type="text/css" href="../../extjs4/resources/css/ext-all.css" /> <script type="text/javascript" src="../../extjs4/bootstrap.js"></script> 
<script type="text/javascript" src="lesson22.js"></script> 
</head> 
<body> 
<button id="myButton" align="center">show</button> 
</body> 
</html>

在该代码片中,并未加载ux目录下的MyWin.js文件,那么在加载该页面的时候,并不会把MyWin.js文件同时加载进来,只是在需要的时候再加载。这里的需要是通过点击button来实现的。

lesson22.js文件内容如下所示:

(function(){ 
Ext.Loader.setConfig({ 
enabled:true, //开启异步加载模式 
paths:{ 
myApp:'lesson2/ux' //声明文件的位置 
} 
}); Ext.onReady(function(){ 
Ext.require('ux.MyWin',function(){ 
var mw = Ext.create('ux.MyWin',{ 
title:'my Test' 
}); 
Ext.get('myButton').on('click',function(){ 
mw.show(); 
}); 
}); 
}); 
})();

ux目录下的MyWin.js文件内容如下所示:
Ext.define('ux.MyWin',{ 
extend:'Ext.window.Window', 
title:'sign up', 
width:400, 
height:300 
});

注意:这里的文件名称MyWin和函数名称必须一样,我试验了一下,如果不一样也会造成无法显示。

刚开始我使用的方法是uspcat上的ExtJS4教学视频第二讲的写法进行书写,但是始终无法出现我想要的结果,可能是版本问题,也可能是自己的问题,通过这样修改,能够使用requires方法了。特此为记,供有相同困惑的人使用。

Javascript 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
JavaScript 类的封装操作示例详解
May 16 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 #Javascript
JavaScript伸缩的菜单简单示例
Dec 03 #Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 #Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 #Javascript
一个js控制的导航菜单实例代码
Dec 03 #Javascript
JS与C#编码解码
Dec 03 #Javascript
探讨jQuery的ajax使用场景(c#)
Dec 03 #Javascript
You might like
php 的加密函数 md5,crypt,base64_encode 等使用介绍
2012/04/09 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
django如何自己创建一个中间件
2019/07/24 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python模块如何查看
2020/06/16 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
秋季运动会广播稿
2014/02/22 职场文书
法律六进活动方案
2014/03/13 职场文书
校园会短篇的广播稿
2014/10/21 职场文书
旷课检讨书范文
2014/10/30 职场文书
2015年个人思想总结
2015/03/09 职场文书
暑期工社会实践报告
2015/07/13 职场文书
采购员工作总结范文
2015/08/12 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫