ExtJS4中的requires使用方法示例介绍_extjs

ExtJS4的requires是新增的机制,主要是实现异步加载机制。这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件,提高了加载速度和用户等待时间。

requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录,然后在需要用到对应js文件的时候使用Ext.require进行加载。

文件的存储结构如下所示:
 
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方法了。特此为记,供有相同困惑的人使用。

时间: 2024-10-23 07:16:12

ExtJS4中的requires使用方法示例介绍_extjs的相关文章

jsp中定义和使用方法示例介绍_JSP编程

在jsp中,如果需要处理复杂数据时,在上方定义一个java方法是很有效的解决方案,把处理数据的责任推给该方法,然后该jsp页面的主流程就不受影响.当然也可以使用js定义方法来处理,js似乎更善于定义这样的方法来处理前台数据,但有时候jsp和js之间倒腾数据时会出乱码或者报一些找不到对象的错误,因此他们之间的互相传值还是越少越好. 看一看jsp中定义一个字符串处理的方法: 复制代码 代码如下: <%! String splitString(String str, int a) { if (str

html 中 #include file 的用法示例介绍

 html 中 #include file 的用法示例介绍 有两个文件a.htm和b.htm,在同一目录下a.htm内容如下 代码如下: <!-- #include file="b.htm" --> b.htm内容如下 今天:雨 31 ℃-26 ℃ <br />明天:雷阵雨 33 ℃-27 ℃ 直接在浏览器中打开a,没有任何显示,后来知道,include是SSI(Server Side Include),在html中不支持include,之后把a.htm改成a.

Android中imageview.ScaleType使用方法详细介绍

Android中imageview.ScaleType使用方法详细介绍 ScaleType属性用以表示显示图片的方式,共有8种取值: ScaleType.CENTER:图片大小为原始大小,如果图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示. ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示. ScaleType.CENTER_INSIDE:将图片大小大于Im

PHP模板引擎Smarty中变量的使用方法示例_php实例

本文实例讲述了PHP模板引擎Smarty中变量的使用方法.分享给大家供大家参考,具体如下: 一.概述: Smarty 是 PHP 众多模板引擎中的一个,它是根据 PHP 编写的一个类库. Smarty 的优点: 1.优化网站访问速度: 2.网页前端设计和程序的分离: 二.Smarty 的安装 1.需要到 Smarty 的官方网站 http://www.smarty.net/download.php 下载最新的 Smarty 版本,比如下载的版本为:Smarty-2.6.18.tar.tar: 2

smarty中js的调用方法示例_php实例

本文实例讲述了smarty中js的调用方法,分享给大家供大家参考.具体方法分析如下: 一.问题: 有时候,在smarty中,包含js的时候,整个页面就不会显示,而程序员往往在页面中找错误,程序页面,模板页面检查了多次都没有错误,就很郁闷了. 二.解决办法: 把模板页面中的js代码拷贝出来放在新建的js文件中,然后在包含到模板页面里面,如: 复制代码 代码如下: {popup_init src="css/commen.js"} 这样一来,问题就解决了. 希望本文所述对大家的PHP程序设计

thinkPHP模板中函数的使用方法示例_php实例

本文实例讲述了thinkPHP模板中函数的使用方法.分享给大家供大家参考,具体如下: 1.php中的方法使用 <?php $var_num = "13966778888"; $str = substr_replace($var_num,'*****',3,5); echo $str; $var_date = time(); $str = date("Y-m-d H:i",$var_date); echo $str; ?> 2.模板中的使用 {sh:$me

Zend Framework框架中实现Ajax的方法示例

本文实例讲述了Zend Framework框架中实现Ajax的方法.分享给大家供大家参考,具体如下: 开发平台:Windows XP SP2 测试平台:FreeBSD 7.0 开发工具:Netbeans 6.1 使用框架:Zend Framework 1.5.2 数据库: MySQL 5.0.51a 所需的数据库表和ZF相关目录以及文件: 一.表: mysql> select * from news; +----+-------+---------------------+ | id | tit

在JavaScript中判断整型的N种方法示例介绍_javascript技巧

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查 你可以使用余数运算(%),将一个数字按1求余,看看余数

设置php页面编码的两种方法示例介绍

  这篇文章主要介绍了两种设置php页面编码的方法,并附有示例,大家可以练习下 1:输出meta标签: 1.在php mvc的控制器里面或php页面echo ''; 2.在php页面或html页面 2:使用header函数 在控制器或页面里面header("content-type:text/html; charset=utf-8");