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 相关文章推荐
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
js实现漫天星星效果
Jan 19 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
详解vue路由
Aug 05 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
中英文字符串翻转函数
2008/12/09 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
Django学习笔记之Class-Based-View
2017/02/15 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
Python读取yaml文件的详细教程
2020/07/21 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
学生喝酒检讨书
2014/02/06 职场文书
个人简历中自我评价
2014/02/11 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
红色故事演讲稿
2014/05/22 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
pandas进行数据输入和输出的方法详解
2022/03/23 Python