這個文件定義的是Ext.DomHelper類。作用是提供一些Dom的操作。這個類不是靜態類。
這個類第一個函數createHtml是一個私有函數,用於從指定轉入創建對應的html文本。這個類有多種情況,根據源代碼分析:
var createHtml = function(o){}
o的取值可能有:string(現成的html字符串)、Array(JSON對象數組)、object(JSON對象)
可見,createHtml的主要作用是把一個JSON序列化爲html字符串。那麼,createHtml能識別的JSON對象有什麼格式要求呢?當然有,描述如下:
{tag:string, //元素的標記名,如果沒有,默認爲div
children|cn:string|Array|json, //子結點對應的json數組或字節點的html或單個json
html:string, //對應的html,如果有cn或children屬性就忽略
style:function|string|json, //元素的樣式,可以是函數,字符串,json對象
cls:string, //元素的class屬性的值
htmlFor:string //元素的For屬性,
x:y //x表示其他名字,y表示非函數、非空內容
}
我發現,style儘管允許是放一個function,但是,如果真是function的話,那麼對應的style並不會生成,因爲如下代碼:
if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
如果值是函數,就continue了。這應當是extJs程序員不小心的bug。
下面有一個私有函數:createDom,定義爲var createDom = function(o, parentNode){……},用於根據一個o創建dom結構樹,並把它放到parentNode這個節點下。o的情況跟上面的createHtml一樣。這兒我學到的是:documentFragment,這個函數用於創建一個文檔碎片,爲什麼用它呢?點此處見詳情!document結構下,每appendChild一次就引發一次樹的刷新,這將影響性能,而使用Fragment,相當於先將所節點創建好好一緩存,然後一次性appendChild到document(注意,這兒的document泛指文檔樹)下。
var insertIntoTable = function(tag, where, el, html){……}
它的作用是往表裏面插入單元格或行、或tbody或在table之前或之後插入指定html內容的文本。即:
tag:null/td/tr/tbody
where:beforebegin/afterend/afterbegin
el:節點的引用
html:要插入的內容
後面就是insertHtml了,這個函數是關鍵,可惜裏面好多函數不熟,整個DomHelper中的那些函數,好多都是建立在它的基礎之上的。像什麼:insertBefore、insertEnd、insertFirst、append。overwrite是重寫已有節點的innerHTML用的。至此功能倒是齊全了。
其實,總結Dom操作,無非就是插、刪、修改。這兒封裝的都是插入,因爲修改簡單,改它的innerHTMl就是了,況且這兒還有一個overwrite。刪也簡單,有Ext.destroy。Ext.Element.remove。