`

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

EXTCSSjQueryJavaScriptjson 
阅读更多

上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。区别在于fly返回的是Element轻量级的，占用较少的内存，但是不保存对象的引用，每次使用都会改变先前的对象，而get则会缓存每次返回的Element对象，但是占用较多的内存。我们通过一个例子来说明二者的区别，同时看看Element给我们提供的强大功能。在我们项目中添加一个html页面，内容如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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对象并进行一些操作，代码如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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对象，用来对动画进行详细的定制，我们把上 边的代码改一下，来看看带动画的效果： 

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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(){})这样的用法了。通过这个方法还可以一次注册多个事件，例如：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 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指出在事件触发多长时间以后执行事件处理函数，单位是毫秒。还有一种简洁的写法：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1el.on({
2    'click' : this.onClick,
3    'mouseover' : this.onMouseOver,
4    'mouseout' : this.onMouseOut,
5    scope: this
6});
分享到：
| extjs学习笔记（一） 一些基础知识
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 ...26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77

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

    本篇学习笔记将深入探讨`Ext.Element`类，包括`Ext.fly`和`Ext.get`的区别以及如何使用`Ext.Element`进行各种DOM操作。 首先，`Ext.fly` 和 `Ext.get` 都是用来获取`Ext.Element`对象的方法，但它们之间存在一些...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    Extjs学习笔记有用

    `Ext.get` 是 ExtJS 中获取页面元素的重要方法，它是 `Ext.Element.get` 的别名。此方法接受一个参数，可以是元素的ID、DOM节点或者已经存在的 `Ext.Element` 对象。它返回一个 `Ext.Element` 对象，这个对象提供了...

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(Element.js篇/DomHelper.js篇/ext.js篇)**：分别介绍了这三个核心文件中提供的功能和方法。 综上所述，文档涵盖了Ext JS框架的核心知识点，从基本概念到具体应用都有详细的阐述，这对于初学者...

    extjs学习笔记

    Ext.Element是ExtJS的底层API，主要用于操作DOM元素，提供了一组丰富的DOM操作方法。DOM（Document Object Model）是W3C标准定义的网页结构模型，Ext.Element通过与DOM交互来实现页面的动态效果和用户交互。 总的来...

    Ext API详解--笔记

    在`EXT核心API详解(三)-Ext.Element.txt`中，你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**： 在`EXT核心API详解(二)-Array Date ...

    ExtJS使用笔记

    Ext.Element是ExtJS的心脏，它扩展了原生的DOM元素，增加了动画、尺寸调整、位置控制等功能。Ext.Template和Ext.XTemplate是用于处理模板的类，能够实现内容的动态插入和渲染。通过模板可以快速定义数据的展示方式，...

    ext 学习笔记 ext 学习笔记

    根据提供的文件信息，我们可以归纳出一系列关于EXT框架的学习知识点，主要围绕EXT框架的基本概念、安装与使用、核心组件以及高级特性展开。 ### EXT框架简介 #### 1. 下载Ext EXT是一个开源的JavaScript框架，它...

    Ext学习笔记

    Ext学习笔记中涉及了ExtJS框架的基本概念和使用方法，下面是基于文章内容的详细知识点总结： 1. ExtJS简介与安装： ExtJS是一个开源的JavaScript库，它用来创建富互联网应用（RIA）。它基于jQuery，提供了一套丰富...

    extjs4笔记PDF版本，带目录

    #### 二、获取ExtJS4并搭建学习环境 ##### 获取ExtJS4 首先，你需要从官方资源或可信赖的第三方资源下载ExtJS4。推荐访问`http://extjs.org.cn/`获取最新版本的发布包，这包括了必要的文件和API文档，对初学者非常...

    EXT_JS实用开发指南_个人整理笔记.docx

    - **底层API（core）**：这是EXT_JS的基础，包含DOM操作、事件处理、DOM查询等功能，例如`DomHelper.js`和`Element.js`。 - **控件（widgets）**：提供各种可视化组件，如面板、表格、树、窗口等，它们构建在底层...

Magicbox
Global site tag (gtag.js) - Google Analytics