Extjs 基础篇―― Ext.DomHelper

Ext.DomHelper是处理DOM或模板（Templates）的实用类。其实就是对原生的DOM操作进行封装、改进，让我们更加方便的操作DOM元素。

Ext.DomHelper的主要方法如下：

1.append( String/HTMLElement/Element el, Object/String o, Boolean returnElement )

2.insertHtml( String where, HTMLElement el, String html )

3.overwrite( String/HTMLElement/Element el, Object/String o, Boolean returnElement )

4.createTemplate( Object o )

例子：

1. function appendAsTag(){

    var str = '<ul><li>巴以冲突持续升级,</li>';

    str += '<li>中共十八大报道,</li>';

    str += '<li>成品油价格下调,</li><ul>';

    Ext.DomHelper.append('myDiv',str);

 }

2. function appendAsObj(){

    var obj = {

        tag : 'ul',

        children:[

             {tag:'li',html:'巴以冲突持续升级'},

             {tag:'li',html:'中共十八大报道'},

             {tag:'li',html:'成品油价格下调'}

         ]

    };

    Ext.DomHelper.append('myDiv',obj);

 }

3. function testInsert(){

     var str = '<ul><li>巴以冲突持续升级,</li>';

     str += '<li>中共十八大报道,</li>';

     str += '<li>成品油价格下调,</li><ul>';

     Ext.DomHelper.insertHtml('afterBegin',Ext.getDom('myDiv'),str);

   }

另外：beforeBegin、afterBegin、beforeEnd、afterEnd能够更灵活的指定插入标签的位置。 

4. function testOverWrite(){

     var str = '<ul><li>巴以冲突持续升级,</li>';

     str += '<li>中共十八大报道,</li>';

     str += '<li>成品油价格下调,</li><ul>';

     Ext.DomHelper.overwrite('myDiv',str);

   }

5. function testTemplate(){

     var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");

     tpl.overwrite('myDiv',{content:'中共十八大报道'});

   }

  这里需要注意：<li>{content}</li>这个写法，相当于是传递参数或者EL表达式。