此文用来记录学习笔记
•我们已经学过了Element这个类，无疑是非常强大的，里面提供了丰富的方法供我们使用，但是Ext为了更加的方便我们去操作DOM元素，特提供了DomHelper这个辅助的工具类。下面我们就一起学习下DomHelper
•首先从API来看，这个类暴露出的public方法并不是特别多。仅仅13个方法而已。如果想生成dom节点，在这里不建议使用原生的方法去生成dom节点，原因是代码量比较大的时候性能比较低、其二是自己组装HTML字符串比较麻烦。在Ext里，DomHelper对象类似一个元素生成器，用于解决此类问题。一般的javascript框架底层都会有生成html代码的类似功能函数。
•DomHelper常用方法：
–createHtml或markup方法
–createDom方法
–append方法
–insertHTML方法
–overwrite方法
–createTemplate方法
–applyStyles方法
举好多栗子
Ext.onReady(function () {
//准备工作
Ext.create('Ext.panel.Panel', {
title: 'DomHelper-元素生成器的使用',
width: '90%',
height: 400,
renderTo: Ext.getBody(),
html: '<div id=d1>我是d1</div>'
});
//DomHelper
//1: createHtml或markup方法
//配置项说明：
//tag 元素的名称
//children/cn表示子元素
//cls表示样式
//html:文本内容
var html = Ext.DomHelper.createHtml({
tag:'ol' ,
cn:[
{tag:'li',html:'item1'},
{tag:'li',html:'item2'}
]
});
console.info(html);
var html = Ext.DomHelper.createHtml({
tag:'div' ,
children:[
{tag:'a' ,html:'bjsxt网站' , href:'www.bjsxt.cn'},
{tag:'input' , value:'点击' , type:'button' }
]
});
console.info(html);
//2: createDom方法 (这个方法是生成原生的dom节点，不推荐使用)
var dom = Ext.DomHelper.createDom({
tag:'div' ,
html:'我是div'
});
console.info(dom);
alert(dom.nodeName);
//3: append方法
Ext.DomHelper.append('d1',{
tag:'ul' ,
cn:[{tag:'li',html:'1111'},{tag:'li',html:'2222'}]
});
Ext.DomHelper.append('d1','<span>我是span内容</span>');
//4:insertHtml方法 //这个方法就是为了操作原生的node节点的
//参数说明：String where, HTMLElement/TextNode el, String html
Ext.DomHelper.insertHtml('beforeBegin',Ext.getDom('d1'),'<h1>我是标题!!</h1>')
//5:overwrite方法
Ext.DomHelper.overwrite('d1',{tag:'span',html:'我是覆盖的span'});
Ext.DomHelper.overwrite('d1','aaaaa');
//6:createTemplate方法
var tp = Ext.DomHelper.createTemplate('<h1>{text}</h1><h2>{text2}</h2>'); //return Ext.Template
tp.overwrite('d1',{text:'我是被替换的内容!!',text2:'我也是替换的内容!!'});
//7:applyStyles方法
Ext.DomHelper.applyStyles('d1',{
width:'100px',
height:'100px',
backgroundColor:'green'
});
});
给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养；