Ext JS 和DOM

来源：互联网发布：matlab矩阵的点乘编辑：程序博客网时间：2024/06/05 06:32

DOM的使用

Ext JS本质上是个DHTML(Dynamic HTML)库，使用JS来创建或者操作DOM元素。事实上，即使是相同的JS DOM操作方法，在不一样的浏览器里也有不一样的表现，这就涉及到了跨浏览器的问题了。为了解决这个问题，Ext JS提供了以下的类：

类描述 Ext.dom.Element Ext JS里包装了最基本HTML DOM的类，提供了一站式规范的DOM操作方法。 Ext.dom.CompositeElement 封装了一组HTML DOM元素，包括了操作、过滤或者特定的方法。 Ext.dom.Helper 允许使用特定的标签标签来创建DOM元素，比如：tag、children、cls和html等。 Ext.dom.Query 允许使用CSS3选择器、自身的选择器和XPath语法来查询DOM元素。

Ext.dom.Element

Ext JS里面的Ext.dom.Element包装了真实的HTML DOM元素，该类负责修改DOM元素并处理各种跨浏览器问题。Ext.get() 和 Ext.fly() 这两个方法返回Ext.dom.Element类的对象。

方法描述 Ext.get() 指定id返回Ext.dom.Element对象。 Ext.fly() 和get()方法表现相同。不会在内存里缓存元素的引用，所以更加快捷迅速。

下面的例子展示了如何获得DOM元素的引用：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>        <script>            Ext.onReady(function () {                // get Ext.dom.Element object                var txtFirst = Ext.get("txtFirstName");                txtFirst.set({ 'value': 'Steve' });                Ext.fly('txtLastName').set({ 'value': 'Jobs' });                console.log(txtFirst.$className);            });    </script></head><body>  First Name: <input type="text" id="txtFirstName" class="myclass"/> <br /><br />  Last Name:  <input type="text" id="txtLastName" class="myclass" /> </body></html>

在上面的例子中，Ext.get()方法返回了id为txtFirstName的Ext.dom.Element对象，然后就可以使用Ext.dom.Element类中的各种方法来操作DOM元素。
注意：当您不需要对DOM元素执行多个操作时，最好使用Ext.fly()函数，因为它更加有效且占用了较少的存储器（所以前一个fly()会被覆盖掉）。例如：

//对比下面的两种情况：//A:     var elementA = Ext.fly('elementA');       var elementB = Ext.fly('elementB');      //无效!!     elementA.dom.innerHTML = 'A';     //有效。        elementB.dom.innerHTML = 'B';  //B:     var elementA = Ext.get('elementA');       var elementB = Ext.get('elementB');      //有效。     elementA.dom.innerHTML = 'A';     //有效。        elementB.dom.innerHTML = 'B';

阅读全文

0 0