Ext.onReady这个方法是指当前DOM加载完毕后,保证页面内的所有元素能被Script引用
Ext.onReady(function(){
alert("嗯,ext第一个程序!");
});
通过ID获取DOM节点
传统:var testDiv=document.getElementById("testDiv");没有任何问题,为了要让这个节点干点事情,我们还要手工编写不少代码;另外对于不同浏览器间的差异,处理起来也是个麻烦的问题。
ext的做法
var testDiv=Ext.get("testDiv");
我们可以对获取到的这个对象,做各种各校的DOM节点操作,如(增加或删除 CSS类选择器,事件,定位,拖放等)
举个例子:
testDiv.addClass("red");//添加一个class="red"
testDiv. center();//将元素居中
testDiv.setOpacity(.25);//使元素半透明
获取多个DOM的节点
通常获取多个DOM节点,难以依靠ID的方式来获取。有可能因为没设置ID,或者是多个ID容易导致冲突,又或者直接用ID方式引用太多元素。
这种情况下,我们不会用ID来作为获取元素的依据,可能会用属性(attribute) 或css classname代替。基于以上原因,ext引入了一个功能强大的DOM Selector库,叫做DomQuery。
DomQuery可作为单独的库使用(DomQuery.js) 但常用于Ext,令人欣喜的是,元素对象本身就有Element.select的方法来实现,即内部调用DomQuery选取元素。
示例:
下面的代码中没有一个P标记是有ID的,而我们想轻松地通过一次操作马上获取每一个段落P,全体执行它们的动作,可以这样做。
<script type="text/javascript">
Ext.select('p').highlight();
</script>
<body>
<p>p标记</p>
<p>p标记</p>
<p>p标记</p>
<p>p标记</p>
<p>p标记</p>
<p>p标记</p>
</body>
DomQuery的选取参数是一段较长的数组,其中包括W3C CSS3 Dom选择器、基本XPath,HTML属性等。。。