Ext JS学习第十四天 Ext基础之 Ext.DomHelper

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‘
        });




});