EXT JS点滴（2）EXT JS核心分析_ext实现轨迹点亮js-CSDN博客

本文链接：https://blog.csdn.net/letianok/article/details/4554508

第一、Ext.onReady（）方法

在上节的Hello World练习中，我们用到了一个叫做 Ext.onReady(function(){ });的方法，Ext.onReady 这个方法是指当前DOM 加载完毕后，保证页面内的所有元素能被Script 引用。你可删除Ext.Msg.alert()那行，加入一些实际用途的代码试试：

Ext.onReady(function() { 。。。。。。。。。 //此为EXT js的基本执行架构 });

第二、Ext的心脏--Element

Ext.get("ID") 获取一个Ext Element元素，Element 元素包含了常见的操作DOM的方法和属性，
提供一个快捷的、统一的、跨浏览器的接口，

Ext.get("ID").dom 可以直接访问底层DOM 的节点；

第三、下面看一个例子

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS点滴（2）</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js" </script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style>  </style </head> <script type="text/javascript"></script> <body> <div id="hello" style="height:200px;width:300px;"></div> </body> </html>

运行效果如下：(透明红色）

红色透明

第四、获取多个dom节点或者Element元素组

在通常情况下，我们可以通过Ext.get/fly的方法获取页面上某个元素，但若我们想获得多个页面上的元素，相应的做法是怎么样的呢？答案就在于DomQuery类中的select/query方法。由于使用频率较高，我们将这两个方法挂到Ext的这个命名空间下，省去每次 Ext.DomQuery.select()/Ext.DomQuery.query()冗长的调用方式。

DomQuery的select方法有两个参数：

第一个可以是选择符字符(Selector String)，即当前我们所说的“CSS选择符”。
第二个是欲生成查询的标记ID(Tag ID)

详细内容，请参看Ext.Element 和 Ext.DomQuery API相关方法属性和事件。

第五、Ext.query与Ext.select的使用注意事项

Ext.query和Ext.select的作用是一致的，同是根据CSS选择符查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型，试比较：

alter(Ext.isArray(this.query('a.BigClass'))); //true

alter(this.query('a.BigClass').length);

this.select('a.BigClass').each(function(i){

i.dom.href = 'javescript:void(0);'// 找到所有带有BigClass样式的A元素修改其链接

});

CompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口，也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处理。
它的用法和单个的Element对象没有不同。select方法返回的结果可直接如同Element般地操作，一般比query方法常用。

第六、请看下面一个例子，选择奇数的DIV,并加上红色背景

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS点滴（2）</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> Ext.onReady( function(){ Ext.select("div:odd").addClass("red"); } ); </script> <body> <div >第1个DIV</div> <div >第2个DIV</div> <div >第3个DIV</div> <div >第4个DIV</div> </body> </html>

结果如下：

奇数DIV