第一、Ext.onReady()方法
在上节的Hello World练习中,我们用到了一个叫做 Ext.onReady(function(){ });的方法,Ext.onReady 这个方法是指当前DOM 加载完毕后,保证页面内的所有元素能被Script 引用。你可删除Ext.Msg.alert()那行,加入一些实际用途的代码试试:
第二、Ext的心脏--Element
Ext.get("ID") 获取一个Ext Element元素,Element 元素包含了常见的操作DOM的 方法和属性,
提供一个快捷的、统一的、跨浏览器的接口,
Ext.get("ID").dom 可以直接访问底层DOM 的节点;
第三、下面看一个例子
运行效果如下:(透明红色)
第四、获取多个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,并加上红色背景
结果如下: