Ext.DomHelper用法

  var panel = new Ext.Panel(...{
   title : 'Ext.DomHelper示例',
   width : '280px',
   renderTo : 'sub1',
   html : '<li id="li1" style="height:160px;padding:5px">原文本</li>'
  });
  Ext.DomHelper.append(Ext.get("li1"),"<br>新追加了文本",true);

		

    var panel = new Ext.Panel(...{
   title : 'Ext.DomHelper示例',
   width : '280px',
   renderTo : 'sub1',
   html : '<li id="li1" style="height:160px;padding:5px">原文本</li>'
  });
  //给id为li1的元素指定一个样式表
  //其样式表的形式可以是直接用文本,如:font-size:18px
  //也可以用文本表示的对象,如:{font-size:18px;}
  Ext.DomHelper.applyStyles(Ext.get("li1"),"font-size:18px;color:green;font-weight:bold;");
  
  var str = Ext.get("li1").dom.outerHTML;
  //由于Ext.Msg.alert会展示alert里的html
  //所以我们特意用文本框来展示应用了样式表后的li效果字符串
  Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');

		

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

		

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

		

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

		

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

		

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

		

 Ext.onReady(function()...{
  var panel = new Ext.Panel(...{
   title : 'Ext.DomHelper示例',
   width : '220px',
   renderTo : 'sub1',
   html : '<li style="height:160px;padding:5px;"><li id="li1" >我是原来的li的内容</li></li>'
  });
  //给指定的li1在之前插入一个新的html
  Ext.DomHelper.overwrite(document.getElementById("li1"),"我是新替换的Html文本");

		

    //tag 元素的名称    

    //children/cn表示子元素   

    //cls表示样式    

    //html:文本内容  

  var html = Ext.DomHelper.createHtml(...{  

      tag:'ol' ,  

     cn:[  

         ...{tag:'li',html:'item1'},  

         ...{tag:'li',html:'item2'}  

     ]  

 });  

  console.info(html);//将结果打印到控制台  

    //返回结果：可以查看控制台中，html的值为：<ol><li>item1</li><li>item2</li></ol>  

     

    //可以自己设定标签中的各种属性，结果生成了传统的HTML  

 var html = Ext.DomHelper.createHtml(...{  

      tag:'li' ,   

     children:[  

          ...{tag:'a' ,html:'bjsxt网站' , href:'www.bjsxt.cn'},  

         ...{tag:'input' , value:'点击' , type:'button' }  

      ]  

 });