Ext.DomHelper类的使用示例（内容操作）

 Ext.DomHelper类的使用示例（内容操作） 

 

1. <mce:script type="text/javascript" ><!--  
2. Ext.DomHelper.append 内容追加  
3.         var panel = new Ext.Panel({  
4.             title : 'Ext.DomHelper示例',  
5.             width : '280px',  
6.             renderTo : 'sub1',  
7.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
8.         });  
9.         Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);  
10.           
11. Ext.DomHelper.applyStyles 样式追加  
12.                 var panel = new Ext.Panel({  
13.             title : 'Ext.DomHelper示例',  
14.             width : '280px',  
15.             renderTo : 'sub1',  
16.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
17.         });  
18.         //给id为div1的元素指定一个样式表  
19.         //其样式表的形式可以是直接用文本,如:font-size:18px  
20.         //也可以用文本表示的对象,如:{font-size:18px;}  
21.         Ext.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");  
22.           
23.         var str = Ext.get("div1").dom.outerHTML;  
24.         //由于Ext.Msg.alert会展示alert里的html  
25.         //所以我们特意用文本框来展示应用了样式表后的div效果字符串  
26.         Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');  
27.           
28. Template.append 追加模板内容  
29.         var panel = new Ext.Panel({  
30.             title : 'Ext.DomHelper示例',  
31.             width : '280px',  
32.             renderTo : 'sub1',  
33.             html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'  
34.         });  
35.         //首先通过DomHelper.createTemplate创建一套模板  
36.         var test = Ext.DomHelper.createTemplate('<div name="{id}">'+  
37.             '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+  
38.             '</div>');  
39.         //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现  
40.         test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);  
41.   
42. Ext.DomHelper.insertAfter 后插新内容  
43.         var panel = new Ext.Panel({  
44.             title : 'Ext.DomHelper示例',  
45.             width : '280px',  
46.             renderTo : 'sub1',  
47.             html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的Div对象</div>'  
48.         });  
49.         //给指定的div1在其后插入一个新的div  
50.         Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");  
51.     });  
52.       
53. Ext.DomHelper.insertBefore 前插新内容  
54.         //给指定的div1在其后插入一个新的div  
55.         Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");  
56.           
57. Ext.DomHelper.insertFirst 追加为第一个子元素  
58.         var panel = new Ext.Panel({  
59.             title : 'Ext.DomHelper示例',  
60.             width : '280px',  
61.             renderTo : 'sub1',  
62.             html : '<div id="div1" style="height:160px;padding:5px;><div id="sub1">我是原来的Div的第一个子对象</div></div>'  
63.         });  
64.         //给指定的div1在其后插入一个新的div  
65.         Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div对象</div>");  
66.     });  
67.       
68. Ext.DomHelper.insertHtml 插入HTML内容  
69.         var panel = new Ext.Panel({  
70.             title : 'Ext.DomHelper示例',  
71.             width : '280px',  
72.             renderTo : 'sub1',  
73.             html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的第一个子对象</div></div>'  
74.         });  
75.         //给指定的div1在之前插入一个新的html  
76.         Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");  
77.           
78. Ext.DomHelper.overwrite 替换内容  
79.     Ext.onReady(function(){  
80.         var panel = new Ext.Panel({  
81.             title : 'Ext.DomHelper示例',  
82.             width : '220px',  
83.             renderTo : 'sub1',  
84.             html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的内容</div></div>'  
85.         });  
86.         //给指定的div1在之前插入一个新的html