第十四讲：ExtJS常用工具类和函数(中)

Ext.DomHelper。

1.append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建一个新的DOM元素并添加到el
参数 o 是一个DOM对象或一个原始html块

Ext.onReady(function(){ Ext.DomHelper.append(Ext.get("test"),"hello"); });

Ext.onReady(function(){ new Ext.Panel({ id:"myPanel", title:"myPanel", width:200, height:200, html:"<div id='hello'>hello</div>", renderTo:"test" });   Ext.DomHelper.append(Ext.get("hello"),",world!"); });

2. applyStyles( String/HTMLElement el, String/Object/Function styles ) : void

应用样式styles到对象el，样式的对象表示方法见Ext.Element

Ext.onReady(function(){ Ext.DomHelper.applyStyles(Ext.get("test"),"font-size:20px;color:red"); });

Ext.onReady(function(){ Ext.DomHelper.applyStyles(Ext.get("test"),{"font-size":"20px","color":"red"}); });

3. createTemplate( Object o ) : Ext.Template，由o创建一个新的Ext.Template对象。

Ext.onReady(function(){ var tmp = Ext.DomHelper.createTemplate('<div id="{id}">world</div>'); tmp.append(Ext.get("test"),{id:"myid"}); });

Ext.onReady(function(){ var tmp = Ext.DomHelper.createTemplate('<div id="{id}">{value}</div>'); tmp.append(Ext.get("test"),{id:"myid",value:"world"}); });

4.insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element

创建一个新的DOM对象o并将他们插入到在el之后

Ext.onReady(function(){ Ext.DomHelper.insertAfter(Ext.get("test4"),'<div id="test6">hello6</div>') });

5.insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建一个新的DOM对象o并将他们插入在el之前。

Ext.onReady(function(){ Ext.DomHelper.insertBefore(Ext.get("test4"),'<div id="test6">hello6</div>') });

6. insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))。

Ext.onReady(function(){ Ext.DomHelper.insertFirst(Ext.get("test1"),",World!"); });

7. insertHtml( String where, HTMLElement el, String html ) : HTMLElement

where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd

将html代码插入到el附近

Ext.onReady(function(){ Ext.DomHelper.insertHtml("afterEnd",Ext.getDom("test1"),"Hello") });

8. markup( Object o ) : String
返回DOM对象o对应的html代码

Ext.onReady(function(){ alert(Ext.DomHelper.markup(Ext.get("test1"))); alert(Ext.DomHelper.markup(Ext.get("test1").dom)); });

9. overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素o并用它重写el的内容

Ext.onReady(function(){ Ext.DomHelper.overwrite(Ext.get("test1"),"Hello,World"); });