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。