Ext.DomHelper的用法

来源：互联网发布：instanceof php 编辑：程序博客网时间：2024/05/28 23:22

1、 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);

2、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>');

3、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);

4、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>"); });

5、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用法 http://www.studyofnet.com/news/632.html

0 0