Ext.DomHelper类的使用示例（内容操作）

 Ext.DomHelper类的使用示例（内容操作） 

 

<mce:script type="text/javascript" ><!--
Ext.DomHelper.append 内容追加
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'
        });
        Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);

Ext.DomHelper.applyStyles 样式追加
                var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'
        });
        //给id为div1的元素指定一个样式表
        //其样式表的形式可以是直接用文本,如:font-size:18px
        //也可以用文本表示的对象,如:{font-size:18px;}
        Ext.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");

        var str = Ext.get("div1").dom.outerHTML;
        //由于Ext.Msg.alert会展示alert里的html
        //所以我们特意用文本框来展示应用了样式表后的div效果字符串
        Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');

Template.append 追加模板内容
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'
        });
        //首先通过DomHelper.createTemplate创建一套模板
        var test = Ext.DomHelper.createTemplate('<div name="{id}">'+
            '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
            '</div>');
        //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
        test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);

Ext.DomHelper.insertAfter 后插新内容
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原来的Div对象</div>'
        });
        //给指定的div1在其后插入一个新的div
        Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");
    });

Ext.DomHelper.insertBefore 前插新内容
        //给指定的div1在其后插入一个新的div
        Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>");

Ext.DomHelper.insertFirst 追加为第一个子元素
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div id="div1" style="height:160px;padding:5px;><div id="sub1">我是原来的Div的第一个子对象</div></div>'
        });
        //给指定的div1在其后插入一个新的div
        Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div对象</div>");
    });

Ext.DomHelper.insertHtml 插入HTML内容
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '280px',
            renderTo : 'sub1',
            html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的第一个子对象</div></div>'
        });
        //给指定的div1在之前插入一个新的html
        Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");

Ext.DomHelper.overwrite 替换内容
    Ext.onReady(function(){
        var panel = new Ext.Panel({
            title : 'Ext.DomHelper示例',
            width : '220px',
            renderTo : 'sub1',
            html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原来的Div的内容</div></div>'
        });
        //给指定的div1在之前插入一个新的html
line-height: 18px; color: black; background

分享到：

十一青岛2人4日自助游记 | Ext.XTemplate

• 2010-06-03 12:43
• 浏览 1810
• 评论(1)
• 分类:Web前端
• 相关推荐

评论

1 楼 zzh200411 2010-08-24  

outerHTML

发表评论

您还没有登录,请您登录后再发表评论