首页 > 代码库 > Ext JS学习第十四天 Ext基础之 Ext.DomHelper
Ext JS学习第十四天 Ext基础之 Ext.DomHelper
此文用来记录学习笔记
•我们已经学过了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,学习之余提高文学修养；
Ext JS学习第十四天 Ext基础之 Ext.DomHelper
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。