Ext.DomHelper用法
Ext.DomHelper用法Ext.DomHelper是处理DOM或模板（Templates）的实用类。其实就是对原生的DOM操作进行封装、改进，让我们更加方便的操作DOM元素。
1、 Ext.DomHelper.append 内容追加
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li id="li1" style="height:160px;padding:5px">原文本</li>'
});
Ext.DomHelper.append(Ext.get("li1"),"<br>新追加了文本",true);
2、Ext.DomHelper.applyStyles 样式追加
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li id="li1" style="height:160px;padding:5px">原文本</li>'
});
//给id为li1的元素指定一个样式表
//其样式表的形式可以是直接用文本,如:font-size:18px
//也可以用文本表示的对象,如:{font-size:18px;}
Ext.DomHelper.applyStyles(Ext.get("li1"),"font-size:18px;color:green;font-weight:bold;");
var str = Ext.get("li1").dom.outerHTML;
//由于Ext.Msg.alert会展示alert里的html
//所以我们特意用文本框来展示应用了样式表后的li效果字符串
Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');
3、Template.append 追加模板内容
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li id="li1" style="height:160px;padding:5px">原文本</li>'
});
//首先通过DomHelper.createTemplate创建一套模板
var test = Ext.DomHelper.createTemplate('<li name="{id}">'+
'<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
'</li>');
//通过定义的模板替换模板中的变量,然后追加在li的id为li1的li里面进行展现
test.append(Ext.get("li1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);
4、Ext.DomHelper.insertAfter 后插新内容
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li id="li1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的li对象</li>'
});
//给指定的li1在其后插入一个新的li
Ext.DomHelper.insertAfter(Ext.get("li1"),"<li id='li2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的li对象</li>");
});
5、Ext.DomHelper.insertBefore 前插新内容
//给指定的li1在其后插入一个新的li
Ext.DomHelper.insertBefore(Ext.get("li1"),"<li id='li2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的li对象</li>");
6、Ext.DomHelper.insertFirst 追加为第一个子元素
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li id="li1" style="height:160px;padding:5px;><li id="sub1">我是原来的li的第一个子对象</li></li>'
});
//给指定的li1在其后插入一个新的li
Ext.DomHelper.insertFirst(Ext.get("li1"),"<li id='li2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的li对象</li>");
});
7、Ext.DomHelper.insertHtml 插入HTML内容
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '280px',
renderTo : 'sub1',
html : '<li style="height:160px;padding:5px;"><li id="li1" >我是原来的li的第一个子对象</li></li>'
});
//给指定的li1在之前插入一个新的html
Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("li1"),"我是新插入的Html文本");
8、Ext.DomHelper.overwrite 替换内容
Ext.onReady(function(){
var panel = new Ext.Panel({
title : 'Ext.DomHelper示例',
width : '220px',
renderTo : 'sub1',
html : '<li style="height:160px;padding:5px;"><li id="li1" >我是原来的li的内容</li></li>'
});
//给指定的li1在之前插入一个新的html
Ext.DomHelper.overwrite(document.getElementById("li1"),"我是新替换的Html文本");
9、createHtml
//tag 元素的名称
//children/cn表示子元素
//cls表示样式
//html:文本内容
var html = Ext.DomHelper.createHtml({
tag:'ol' ,
cn:[
{tag:'li',html:'item1'},
{tag:'li',html:'item2'}
]
});
console.info(html);//将结果打印到控制台
//返回结果：可以查看控制台中，html的值为：<ol><li>item1</li><li>item2</li></ol>
//可以自己设定标签中的各种属性，结果生成了传统的HTML
var html = Ext.DomHelper.createHtml({
tag:'li' ,
children:[
{tag:'a' ,html:'bjsxt网站' , href:'www.bjsxt.cn'},
{tag:'input' , value:'点击' , type:'button' }
]
});