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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
利用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的输出:缓存并压缩动态页面
2013/06/11 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
js友好的时间返回函数
2016/08/24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
Python 常用string函数详解
2016/05/30 Python
解读python如何实现决策树算法
2018/10/11 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
Python json转字典字符方法实例解析
2020/04/13 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Linux常见面试题
2016/10/04 面试题
周年庆促销方案
2014/03/15 职场文书
品质保证书格式
2015/02/28 职场文书
张丽莉观后感
2015/06/16 职场文书
医院病假条范文
2015/08/17 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby
Spring中bean集合注入的方法详解
2022/07/07 Java/Android