- 浏览: 633526 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (609)
- java (139)
- 数据库 (107)
- 微信 (23)
- IT生活 (5)
- web前端 (74)
- SSH (11)
- 设计模式 (12)
- 重要资料 (11)
- 其他 (15)
- java技巧 (23)
- 服务器 (9)
- 2D/GUI (3)
- JAVA3D (2)
- ANT (5)
- Apache项目 (19)
- 数据类型 (10)
- 报表 (3)
- Collections (6)
- SQL/JDBC (15)
- 开发类 (6)
- EJB (6)
- Email (6)
- 文件读写 (2)
- 游戏 (0)
- Flex (2)
- Generic (2)
- HIbernate (12)
- I18N (5)
- Java EE (9)
- java ME (4)
- JDK 6 (8)
- JNDI/LDAP (5)
- JSP (7)
- JSTL (2)
- 正则表达式 (2)
- 安全 (2)
- Struts2 (12)
- Spring (4)
- Web服务 (10)
- Xml (1)
- JavaScript (30)
- AJAX (7)
- 验证 (4)
- 上传下载 (1)
- office办公软件 (1)
- Android (2)
- IOS (0)
- Dubbo (3)
- memcached/redis (1)
- 小程序 (1)
- 微信公众号 (0)
最新评论
-
wf_wangfeng:
怎么我用第一种方法不行呢 alert(document.rea ...
当jsp页面完全加载完成后执行一个js函数 -
Lori_Liu:
有帮助,至少可以解决了目前所遇到的问题!谢谢..
当jsp页面完全加载完成后执行一个js函数 -
starbhhc:
String actionMessage = new Stri ...
Java读取txt文件乱码 -
starbhhc:
Sev7en_jun 写道GOOD
客气,互相交流。。
javaeye论坛规则小测验(答案)--star -
Sev7en_jun:
GOOD
javaeye论坛规则小测验(答案)--star
extjs学习笔记(二) Ext.Element类
上个系列中,我们用到了Ext.fly来获得一个Element对象,其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get,是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。区别在于fly返回的是Element轻量级的,占用较少的内存,但是不保存对象的引用,每次使用都会改变先前的对象,而get则会缓存每次返回的Element对象,但是占用较多的内存。我们通过一个例子来说明二者的区别,同时看看Element给我们提供的强大功能。在我们项目中添加一个html页面,内容如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>Element Demo</title>
5 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6 <script type="text/javascript" src="extjs/ext-base-debug.js"></script>
7 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
8 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9 <script type="text/javascript" src="js/element.js"></script>
10 </head>
11 <body>
12 <input type="button" value="请点击我" id="btn" />
13 <div id="div1"></div>
14 <div id="div2"></div>
15 </body>
16 </html>
当然还要添加element.js文件,我们先用Ext.get方法来获取element对象并进行一些操作,代码如下:
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者:大笨
4*日期:2009-10-12
5*版本:1.0
6*博客地址:http://yage.cnblogs.com
7*/
8
9Ext.onReady(function() {
10 Ext.get("btn").on("click", function() {
11 var el1 = Ext.get("div1");
12 var el2 = Ext.get("div2");
13 el1.addClass("red"); //增加CSS类
14 el2.addClass("green");
15 el1.setWidth(); //设置宽度
16 el1.highlight(); //高亮显示
17 el1.center(); //居中
18 el1.setOpacity(0.5); //设置透明度
19 el2.fadeIn({ endOpacity: 1, //可以是0和1之间的任意值
20 easing: 'easeOut',
21 duration: 1
22 });
23 //el1.addClass("red").setWidth(100).setOpacity(0.5).center();
24 });
25});
运行之后我们点击button按钮可以看到效果。代码都很直观,不需要过多的解释。现在我们把Element的get方法换成fly,运行之后我们会发现,所有的操作都在div2上进行,因为div1的Element引用并未被保存下来,第二次使用fly方法的时候改写了第一次获得的Element对象,所以我们看到操作都在div2上进行了。很多用过jquery的人喜欢用方法链(method chain)的方式写代码,由于Element对象的大多数方法返回的还是Element对象,所以这里也可以采用方法链,就像 我在23行中写的那样。但是要注意highlight,fadeIn,fadeOut这些方法事实上并不是Element对象的方法,它们其实是 Ext.Fx类中的方法,只是用了js的apply方法给加到Element对象上去了(apply方法的使用可以参考这里),Fx 泪中的方法使用了内部的效果队列,效果是按照特定的顺序的,而Element对象的方法则是立即执行的。所以在方法链中同时使用Element和Fx的方 法时需要注意,有可能会产生不希望看的结果。
我们的代码中用到了setWith方法,在Element类还有一些以set开头的方法,用来进行一些设置,这些方大多 数有一个可选的参数用来呈现动画的效果,这个参数可以是布尔值,可以用来开启默认的设置,也可以是一个json对象,用来对动画进行详细的定制,我们把上 边的代码改一下,来看看带动画的效果:
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者:大笨
4*日期:2009-10-12
5*版本:1.0
6*博客地址:http://yage.cnblogs.com
7*/
8Ext.onReady(function() {
9 Ext.get("btn").on("click", function() {
10 Ext.fly("div1").addClass("red").setWidth(100, {
11 duration: 3,
12 easing: 'elasticIn',
13 callback: function() {Ext.Msg.alert("信息","div1的宽度被设置为100") },
14 scope: this
15 });
16 });
17});
简单解释下上边的代码:duration指明动画的时间,这里是3秒;easing用来设定动画的方式,必须是有效的 Ext.lib.Easing的值,可以从帮助文档中获得全部的有效值;callback,当动画执行完毕的时候调用的函数,scope指明callback函数的作用域。
除了使用get和fly方法,Element还有一个select方法,这可是一个很强大的方法,可以根据选择器来获取一个Element的数组(其实返回的是一个CompositeElementLite或者CompositeElement对象,这两个类是js中的继承关系,在内部维护了一个Element对象的数组。当我们在返回的对象上使用Element的方法,实际上是对数组中的每一个Element对象调用方法)。这个方法可以简写为Ext.select,有一个选择器作为参数,使用方法和jquery类似,比如说Ext.select("p")会选择所有的p标签,Ext.select(".red")会选择css类为red的所有标签,选择器可以组合来使用,比如"div.foo:nth-child(odd)[@foo=bar].bar:first"。善于使用选择器可以给我们控制元素带来非常大的方便,可以参阅Ext.DomQuery类的文档来获得更多选择器的相关知识。
Element的query方法使用和select相似的方法来返回Dom节点的集合,不过需要注意的是Ext.query并不是Ext.Element.query的简写,而是Ext.DomQuery.select方法的简写。Dom接点可以通过get方法获得Element对象,而Element对象可以通过dom属性来获得Dom节点,根据不同的需要,我们可以很方便的进行转换。
最后说一下Element的addListener方法,该方法可以简写为on,用来给Element对象注册事件,我们已经看到过on("click",function(){})这样的用法了。通过这个方法还可以一次注册多个事件,例如:
1el.on({
2 'click' : {
3 fn: this.onClick,
4 scope: this,
5 delay: 100
6 },
7 'mouseover' : {
8 fn: this.onMouseOver,
9 scope: this
10 },
11 'mouseout' : {
12 fn: this.onMouseOut,
13 scope: this
14 }
15});
16
delay指出在事件触发多长时间以后执行事件处理函数,单位是毫秒。还有一种简洁的写法:
1el.on({
2 'click' : this.onClick,
3 'mouseover' : this.onMouseOver,
4 'mouseout' : this.onMouseOut,
5 scope: this
6});
上个系列中,我们用到了Ext.fly来获得一个Element对象,其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get,是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。区别在于fly返回的是Element轻量级的,占用较少的内存,但是不保存对象的引用,每次使用都会改变先前的对象,而get则会缓存每次返回的Element对象,但是占用较多的内存。我们通过一个例子来说明二者的区别,同时看看Element给我们提供的强大功能。在我们项目中添加一个html页面,内容如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>Element Demo</title>
5 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
6 <script type="text/javascript" src="extjs/ext-base-debug.js"></script>
7 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
8 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9 <script type="text/javascript" src="js/element.js"></script>
10 </head>
11 <body>
12 <input type="button" value="请点击我" id="btn" />
13 <div id="div1"></div>
14 <div id="div2"></div>
15 </body>
16 </html>
当然还要添加element.js文件,我们先用Ext.get方法来获取element对象并进行一些操作,代码如下:
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者:大笨
4*日期:2009-10-12
5*版本:1.0
6*博客地址:http://yage.cnblogs.com
7*/
8
9Ext.onReady(function() {
10 Ext.get("btn").on("click", function() {
11 var el1 = Ext.get("div1");
12 var el2 = Ext.get("div2");
13 el1.addClass("red"); //增加CSS类
14 el2.addClass("green");
15 el1.setWidth(); //设置宽度
16 el1.highlight(); //高亮显示
17 el1.center(); //居中
18 el1.setOpacity(0.5); //设置透明度
19 el2.fadeIn({ endOpacity: 1, //可以是0和1之间的任意值
20 easing: 'easeOut',
21 duration: 1
22 });
23 //el1.addClass("red").setWidth(100).setOpacity(0.5).center();
24 });
25});
运行之后我们点击button按钮可以看到效果。代码都很直观,不需要过多的解释。现在我们把Element的get方法换成fly,运行之后我们会发现,所有的操作都在div2上进行,因为div1的Element引用并未被保存下来,第二次使用fly方法的时候改写了第一次获得的Element对象,所以我们看到操作都在div2上进行了。很多用过jquery的人喜欢用方法链(method chain)的方式写代码,由于Element对象的大多数方法返回的还是Element对象,所以这里也可以采用方法链,就像 我在23行中写的那样。但是要注意highlight,fadeIn,fadeOut这些方法事实上并不是Element对象的方法,它们其实是 Ext.Fx类中的方法,只是用了js的apply方法给加到Element对象上去了(apply方法的使用可以参考这里),Fx 泪中的方法使用了内部的效果队列,效果是按照特定的顺序的,而Element对象的方法则是立即执行的。所以在方法链中同时使用Element和Fx的方 法时需要注意,有可能会产生不希望看的结果。
我们的代码中用到了setWith方法,在Element类还有一些以set开头的方法,用来进行一些设置,这些方大多 数有一个可选的参数用来呈现动画的效果,这个参数可以是布尔值,可以用来开启默认的设置,也可以是一个json对象,用来对动画进行详细的定制,我们把上 边的代码改一下,来看看带动画的效果:
1///<reference path="vswd-ext_2.0.2.js" />
2/**//*
3*作者:大笨
4*日期:2009-10-12
5*版本:1.0
6*博客地址:http://yage.cnblogs.com
7*/
8Ext.onReady(function() {
9 Ext.get("btn").on("click", function() {
10 Ext.fly("div1").addClass("red").setWidth(100, {
11 duration: 3,
12 easing: 'elasticIn',
13 callback: function() {Ext.Msg.alert("信息","div1的宽度被设置为100") },
14 scope: this
15 });
16 });
17});
简单解释下上边的代码:duration指明动画的时间,这里是3秒;easing用来设定动画的方式,必须是有效的 Ext.lib.Easing的值,可以从帮助文档中获得全部的有效值;callback,当动画执行完毕的时候调用的函数,scope指明callback函数的作用域。
除了使用get和fly方法,Element还有一个select方法,这可是一个很强大的方法,可以根据选择器来获取一个Element的数组(其实返回的是一个CompositeElementLite或者CompositeElement对象,这两个类是js中的继承关系,在内部维护了一个Element对象的数组。当我们在返回的对象上使用Element的方法,实际上是对数组中的每一个Element对象调用方法)。这个方法可以简写为Ext.select,有一个选择器作为参数,使用方法和jquery类似,比如说Ext.select("p")会选择所有的p标签,Ext.select(".red")会选择css类为red的所有标签,选择器可以组合来使用,比如"div.foo:nth-child(odd)[@foo=bar].bar:first"。善于使用选择器可以给我们控制元素带来非常大的方便,可以参阅Ext.DomQuery类的文档来获得更多选择器的相关知识。
Element的query方法使用和select相似的方法来返回Dom节点的集合,不过需要注意的是Ext.query并不是Ext.Element.query的简写,而是Ext.DomQuery.select方法的简写。Dom接点可以通过get方法获得Element对象,而Element对象可以通过dom属性来获得Dom节点,根据不同的需要,我们可以很方便的进行转换。
最后说一下Element的addListener方法,该方法可以简写为on,用来给Element对象注册事件,我们已经看到过on("click",function(){})这样的用法了。通过这个方法还可以一次注册多个事件,例如:
1el.on({
2 'click' : {
3 fn: this.onClick,
4 scope: this,
5 delay: 100
6 },
7 'mouseover' : {
8 fn: this.onMouseOver,
9 scope: this
10 },
11 'mouseout' : {
12 fn: this.onMouseOut,
13 scope: this
14 }
15});
16
delay指出在事件触发多长时间以后执行事件处理函数,单位是毫秒。还有一种简洁的写法:
1el.on({
2 'click' : this.onClick,
3 'mouseover' : this.onMouseOver,
4 'mouseout' : this.onMouseOut,
5 scope: this
6});
发表评论
-
npm安装教程
2020-11-23 16:09 596一、使用之前,我们先来掌握3个东西是用来干什么的。 npm ... -
手机上万能返回上一页代替history.go(-1)
2016-05-13 11:25 778最近在做wap2.0的手机wap,写返回上一页的时候,开始 ... -
3.nodejs nodejs的mysql模块
2016-04-12 22:20 513安装nodejs的mysql模块首先要选定一个数据库,我选择 ... -
2.nodejs 使用Express4.x搭建第一个Web应用
2016-04-12 09:36 554Express4.x 是一个开源的node.js项目框架 ... -
1.nodejs windows 下安装nodejs
2016-04-12 09:34 3721.下载: 在nodejs的官方网站下载mis文件。ht ... -
Nodejs学习
2016-04-11 17:21 493将介绍如何利Javascript做为服务端脚本,通过Node ... -
HTML5做手机站页面字体显示很小的解决方法
2016-05-28 23:31 690HTML5做手机站需要加上一部分代码,不然字体会显示很小的 ... -
jquery 校验
2015-07-07 11:16 0EasyUI 验证框使用方法: ... -
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2015-05-20 09:49 560一、javascript函数实现: //JavaS ... -
//from提交表单 使用ajax异步读取,回调函数
2015-04-24 18:05 0<%@ page language="ja ... -
js获取带checkbox行的记录的Id值的两个方法
2015-04-09 14:44 651第一种: function updateProcess() ... -
基于注解的SpringMVC简单介绍
2015-04-03 11:58 562SpringMVC是一个基于DispatcherServle ... -
Linux环境下Nginx的安装
2014-03-28 13:26 453Linux下命令: /usr/local/nginx/s ... -
自用打印(二)
2014-03-19 17:30 537<html> <title> ... -
自用打印方法(一)
2014-03-19 17:25 427经过验证的,自用的。 ... -
各种微博分享代码
2014-03-19 15:56 876<HTML> <HEAD> ... -
JSP页面打印(二)
2014-03-18 11:04 731<HTML><HEAD><T ... -
JSP页面打印方法(一)
2014-03-18 10:57 3067JSP页面打印方法 方法一:function Print ... -
jquery和js初始化加载的多种方法
2014-01-20 14:48 872jquery和js初始化加载页面的区别: jquery:等 ... -
js自动刷新当前页面
2013-12-19 14:09 758reload 方法,该方法强 ...
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 ...
21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) ...
Extjs 5 学习笔记,在网上下载整理好的。
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
老师整理的extjs学习笔记,和大家共享
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
非常适合新手学习extjs的笔记,让你少走弯路
语言程序设计资料:ExtJs学习笔记-2积分.doc
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
EXTJS学习笔记!亲,初学者的必备哦,其中还有部分的Aop、Hibernate