教你ExtJS從入門到放棄——篇二十六(示例23:DomHelper具類的方法:createHtml,createDom,append,insertHTML,overwrite,applyStyle)
阿新 • • 發佈:2018-12-07
為什麼要學這個工具類
說到這幾個方法之前,首先看看當引數為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,但是我還是更習慣這個