Extjs DOM操做的幾個類

Extjs提供了很是完善的DOM操做方法，能夠方便的操做DOM。另外Extjs還能夠方便的查詢DOM元素，並把這些DOM元素封裝成Ext.Element對象，經過Element對象咱們能夠操做DOM元素。下面來看一下Extjs操做DOM的幾個類：

Ext.Element 、Ext.DomHelper、Ext.DomQuery三個支柱性庫。

 

Ext.Element

Ext.Element.get()快捷方式Ext.get()，只能以dom的id做爲參數去獲取Ext.Element對象（Ext.get返回的結果是Ext.Element對象的實例， .dom纔是原生的dom）。在Ext中全部組件都是有Id的，這個Id能夠是手動指定，也能夠是Ext的Id生成機制自動生成。

Ext.DomHelper

主要是操做dom。

Ext.DomHelper.append()是一個很經常使用的方法，值得一提的是因爲Ext採用了對象緩存機制，在MVC模式下在不一樣的tab切換的時候若是從新渲染dom，使用Ext.DomHelper.append()添加的元素不會丟失，可是使用原生或者其餘框架（好比jq）就會丟失。這就是我說她像一個的老婆緣由之一。看幾個用法：

1、直接字符串

Ext.DomHelper.append(元素id,'<a href="#">你好</a>');

2、對象

Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一個ul列表的第一項'},{...}]});

Ext.DomHelper.insertHtml()另外一個很經常使用的方法

Ext.DomHelper.insertHtml(位置參數,dom,'<a href="#">你好</a>');

位置參數：beforeBegin、afterBegin、beforeEnd、afterEnd

Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');至關於原生的 .innerHtml="";因此是重寫容器中的內容。

var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");

tpl.overwrite(domID,{content:'內容'});

引用文件有問題，會報錯

還有另外一種用法：

var tpl = new Ext.DomHelper.createTemplate({tag:"li",html:"{content}"});，一樣的報錯...哪位大神路過望指點

若是是列表，那就要藉助for循環append了。

Ext.DomQuery 查找dom元素的利器

Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div：first-child').支持絕大部分的CSS3選擇器

Ext.query() 是Ext.DomQuery.select()的快捷方式， 返回標準dom。