Ext JS 和DOM

最新推荐文章于 2021-03-23 02:50:00 发布

wangchunbo007

最新推荐文章于 2021-03-23 02:50:00 发布

阅读量389

点赞数

分类专栏： ExtJS-Tutorial翻译文章标签： ext

ExtJS-Tutorial翻译专栏收录该内容

16 篇文章 1 订阅

订阅专栏

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';