extjs学习札记（二）
日期：2014-05-16 浏览次数：20445 次
extjs学习笔记（二）
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 &
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 &
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
