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,学习之余提高文学修养；