extjs 学习笔记（二） Ext.Element类
程序员文章站
2022-06-17 17:45:46
区别在于fly返回的是element轻量级的，占用较少的内存，但是不保存对象的引用，每次使用都会改变先前的对象，而get则会缓存每次返回的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
});
复制代码 代码如下:
<!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
});
下一篇： EXT中xtype的含义分析