Ext.DomHelper

<script language="javascript">
Ext.onReady(function(){
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'
});
//追加新文本
Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);
});
</script>

（1）//给id为div1的元素指定一个样式表
Ext.DomHelper.applyStyles(Ext.get("div1"),"fontsize:18px;color:green;font-weight:bold;");
（2）
首先通过DomHelper.createTemplate创建一套模板
var test = Ext.DomHelper.createTemplate('<div name="{id}">'+
'<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
'</div>');
//通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);
（3）
//Ext.DomHelper.insertAfter 给指定的div1在其后插入一个新的div
Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");
（4）
//Ext.DomHelper.insertBefore 给指定的div1在其后插入一个新的div
Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");
（5）
// Ext.DomHelper.insertFirst给指定的div1在其后插入一个新的div
Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div对象</div>");
（6）
//给指定的div1在之前插入一个新的html
Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
（7）
Ext.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");