第十四講：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");

});