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 相关文章推荐
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
js中的闭包实例展示
Nov 01 Javascript
JS中的const命令你真懂它吗
Mar 08 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数学运算
2011/12/30 PHP
PDO::quote讲解
2019/01/29 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python显示生日是星期几的方法
2015/05/27 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
详解用python生成随机数的几种方法
2019/08/04 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
最新自我评价范文
2013/11/16 职场文书
七年级音乐教学反思
2014/01/26 职场文书
网页美工求职信范文
2014/04/17 职场文书
中秋手机店促销方案
2014/06/16 职场文书
暑期学习心得体会
2014/09/02 职场文书
小学母亲节活动总结
2015/02/10 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Go语言入门exec的基本使用
2022/05/20 Golang