extjs 学习笔记（二） Ext.Element类

区别在于fly返回的是Element轻量级的，占用较少的内存，但是不保存对象的引用，每次使用都会改变先前的对象，而get则会缓存每次返回的Element对象，但是占用较多的内存。我们通过一个例子来说明二者的区别，同时看看Element给我们提供的强大功能。在我们项目中添加一个html页面，内容如下：


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Element Demo</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/element.js"></script>
</head>
<body>
<input type="button" value="请点击我" id="btn" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

当然还要添加element.js文件，我们先用Ext.get方法来获取element对象并进行一些操作，代码如下：


代码如下:

///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-12
*版本：1.0
*/

Ext.onReady(function() {
Ext.get("btn").on("click", function() {
var el1 = Ext.get("div1");
var el2 = Ext.get("div2");
el1.addClass("red"); //增加CSS类
el2.addClass("green");
el1.setWidth(); //设置宽度
el1.highlight(); //高亮显示
el1.center(); //居中
el1.setOpacity(0.5); //设置透明度
el2.fadeIn({ endOpacity: 1, //可以是0和1之间的任意值
easing: 'easeOut',
duration: 1
});
//el1.addClass("red").setWidth(100).setOpacity(0.5).center();
});
});

运行之后我们点击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对象，用来对动画进行详细的定制，我们把上 边的代码改一下，来看看带动画的效果：


代码如下:

///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-12
*版本：1.0
*/
Ext.onReady(function() {
Ext.get("btn").on("click", function() {
Ext.fly("div1").addClass("red").setWidth(100, {
duration: 3,
easing: 'elasticIn',
callback: function() {Ext.Msg.alert("信息","div1的宽度被设置为100") },
scope: this
});
});
});

简单解释下上边的代码：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(){})这样的用法了。通过这个方法还可以一次注册多个事件，例如：


代码如下:

el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});

delay指出在事件触发多长时间以后执行事件处理函数，单位是毫秒。还有一种简洁的写法：


代码如下:

el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});

赞 (0)

相关推荐

  • Bootstrap3学习笔记(二)之排版

    在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题,Bootstrap已经修改了h1--h6的样式,如果需要副标题,还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2>

  • DB2 UDB V8.1管理学习笔记(二)

    正在看的db2教程是:DB2 UDB V8.1管理学习笔记(二).表空间类型分为SMS和DMS,分别是system management space, database management space. SMS使用方便,简单,无需手工创建和维护数据存储文件.DMS需要手动指定container和存储数据的文件名,并保证有足够磁盘空间可用.  对于一个数据库,至少存在一个page size为4K的系统临时表空间,可以额外建立具有更大page size的用户临时表空间,系统会自动进行使用. 无法用

  • Flutter学习笔记(二)创建一个flutter项目

    目录 开发环境 实践 运行 网络环境配置 (1)进入packages\flutter_tools\gradle 文件夹,然后打开flutter.gradle文件.目录如下图所示: (2)进入 flutter\packages\flutter_tools\gradle 文件夹,然后打开resolve_dependencies.gradle文件,目录如下: 本文就是利用androidstudio创建一个flutter项目并且成功运行起来.其中运行的过程,可能涉及到网络环境配置的问题.觉得过于简单的朋

  • extjs 学习笔记（二） Ext.Element类

    区别在于fly返回的是Element轻量级的,占用较少的内存,但是不保存对象的引用,每次使用都会改变先前的对象,而get则会缓存每次返回的Element对象,但是占用较多的内存.我们通过一个例子来说明二者的区别,同时看看Element给我们提供的强大功能.在我们项目中添加一个html页面,内容如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • extjs 学习笔记（一） 一些基础知识

    extjs 学习笔记（一） 一些基础知识

    我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例

  • Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    Extjs学习笔记之五 一个小细节renderTo和applyTo的区别

    ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考 个人认为这两篇文章写的不够通俗.写一个简单的例子来看看最终生成了什么代码, 复制代码 代码如下: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/c

  • python网络编程学习笔记(二)：socket建立网络客户端

    1.建立socket 建立socket对象需要搞清通信类型和协议家族.通信类型指明了用什么协议来传输数据.协议的例子包括IPv4.IPv6.IPX\SPX.AFP.对于internet通信,通信类型基本上都是AF_INET(和IPv4对应).协议家族一般表示TCP通信的SOCK_STREAM或者表示UDP通信的SOCK_DGRAM.因此对于TCP通信,建立一个socket连接的语句为:s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)对于UDP通

  • ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    ExtJs 学习笔记基础篇 Ext组件的使用第1/2页

    天介绍一下Ext中组件举几个简单的例子做说明.注意:文章内容有些摘自本人学习过程中看到的资料. Ext2.0对框架进行了非常大的重构,其中最重要的是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext控件.Ext组件由Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件. Ext组件体系由下图所示: 组件大致可分成三大类,即基本组件.工具栏组件.表单元素组件.      基本组件有这么多的组件,可都是非常酷的.组件使

  • Extjs学习笔记之二 初识Extjs之Form

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作.Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证.实际使用的时候只要向FormPanel中添加这些表单项即可.常见的表单项有,TextField,NumberField,Radio,CheckBox等. 下面通过一个例子来

随机推荐