動態的將element加入dom

舉例來說
我們可以在javascript建立這樣的box component然後內嵌 html

                     xtype: 'box',  
                     html: '<img src='+ xxxi.png', '') +'style="vertical-align:bottom;" border="0" ext:qtip="'+Ext.util.Format.htmlEncode("xxxx"))+'">'  

以上的code也可以用另外一種更動態的方式實做(dom的操作)。

大概會用到下面幾個functions
document.createElement
Ext.getCmp
element.setAttribute

首先先建立 a element
接下來再建立img element

     var tip_header = document.createElement("a");  
     var tip_image = document.createElement("img");  

一開始先用目標的obj id得到 component

 var field = Ext.getCmp(obj.id);  

然後以下的屬性
1. img src
2. style
3. width/height
4. qtip
都可以用 setAttribute的方式設定進去
如下:

     tip_image.setAttribute('src', 'xxxxx.png', ''));  
     tip_image.setAttribute('width', '10px');  
     tip_image.setAttribute('height', '10px');  
     tip_image.setAttribute('style', style);  
     tip_image.setAttribute('ext:qtip', message);  

最後把img append為a的child
然後再把a append為目標obj的parent的child如下:

 tip_header.appendChild(tip_image);  
 Ext.getDom(obj).parentNode.appendChild(tip_header);  

利用以上這樣的手法我們就可以動態的把dom element加入dom tree就好像內嵌html一樣