1. 程式人生 > >教你ExtJS從入門到放棄——篇二十六(示例23:DomHelper具類的方法:createHtml,createDom,append,insertHTML,overwrite,applyStyle)

教你ExtJS從入門到放棄——篇二十六(示例23:DomHelper具類的方法:createHtml,createDom,append,insertHTML,overwrite,applyStyle)

為什麼要學這個工具類

說到這幾個方法之前,首先看看當引數為obj時,obj由哪些部分組成,

tag:標籤名,比如input,div,ol,tr等等,

children或者cn:子元素陣列,子元素也可以是obj或者單純的字串等

cls:樣式可以是字串或者物件形式

html:以html格式進行解析

進入正題,常用方法如下

1.createHtml(不建議用原生的document.createElement()方法,效率不高)

效果如下

彈窗內容如下:

然後panel裡添加了一個超連結與一個輸入框

2.createDom:建立原生的js的dom物件(不建議使用,效率低)

效果如下

3.append

效果如下

4.insertHtml:在元素的前或後或開始前,或結束前新增元素

第一個引數:插入節點的位置

第二個引數:原生dom節點或者文字節點

第三個引數:要插入的html結構的字串

效果如下,看

F12檢視頁面元素可以看到,新增到了結束標籤前

5.overwrite:替換

第一個引數為被替換的節點,可以是id,也可以是原生dom或者Ext封裝的dom

第二個是替換的節點,

第三個引數為boolean型別,true返回值為Ext物件

效果如下

6.createTemplate:建立模板(後面會細說)

7.applyStyles:給元素新增樣式

可以用前面的setStyles,但是我還是更習慣這個