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 相关文章推荐
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 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中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
Javascript 解疑
2009/11/11 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python实现智能语音天气预报
2019/12/02 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
Django Form常用功能及代码示例
2020/10/13 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
介绍一下write命令
2014/08/10 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
公司会计岗位职责
2014/02/13 职场文书
北京奥运会主题口号
2014/06/13 职场文书
扬尘污染防治方案
2014/06/15 职场文书
节约粮食标语
2014/06/18 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
介绍长城的导游词
2015/01/30 职场文书