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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
利用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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js URL参数的拼接方法比较
2012/02/15 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
2014/05/04 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
自荐信如何“自荐”
2013/10/24 职场文书
公司出纳岗位职责
2013/12/07 职场文书
人事专员工作职责
2014/02/22 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
面试自我评价范文
2014/09/17 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
八年级作文之友谊
2019/12/02 职场文书