Extjs 基础篇—— Ext.DomHelper

最新推荐文章于 2017-08-21 21:16:13 发布

转载最新推荐文章于 2017-08-21 21:16:13 发布 · 562 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

本文介绍了 Extjs 中 Ext.DomHelper 类的使用方法，包括 append、insertHtml 和 overwrite 等核心方法，并提供了实例代码。此外，还展示了如何创建模板并使用 EL 表达式。

Extjs 基础篇—— Ext.DomHelper

Posted 周五, 11/23/2012 - 12:35 by admin

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.

 
      1.
      function appendAsTag(){
     
      2.
      var str = '<ul><li>巴以冲突持续升级,</li>';
     
      3.
      str += '<li>中共十八大报道,</li>';
     
      4.
      str += '<li>成品油价格下调,</li><ul>';
     
      5.
      Ext.DomHelper.append('myDiv',str);
     
      6.
      }

 
      01.
      function appendAsObj(){
     
      02.
      var obj = {
     
      03.
      tag : 'ul',
     
      04.
      children:[
     
      05.
      {tag:'li',html:'巴以冲突持续升级'},
     
      06.
      {tag:'li',html:'中共十八大报道'},
     
      07.
      {tag:'li',html:'成品油价格下调'}
     
      08.
      ]
     
      09.
      };
     
      10.
      Ext.DomHelper.append('myDiv',obj);
     
      11.
      }

 
      1.
      function testInsert(){
     
      2.
      var str = '<ul><li>巴以冲突持续升级,</li>';
     
      3.
      str += '<li>中共十八大报道,</li>';
     
      4.
      str += '<li>成品油价格下调,</li><ul>';
     
      5.
      Ext.DomHelper.insertHtml('afterBegin',Ext.getDom('myDiv'),str);
     
      6.
      }

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

 
      1.
      function testOverWrite(){
     
      2.
      var str = '<ul><li>巴以冲突持续升级,</li>';
     
      3.
      str += '<li>中共十八大报道,</li>';
     
      4.
      str += '<li>成品油价格下调,</li><ul>';
     
      5.
      Ext.DomHelper.overwrite('myDiv',str);
     
      6.
      }

 
      1.
      function testTemplate(){
     
      2.
      var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");
     
      3.
      tpl.overwrite('myDiv',{content:'中共十八大报道'});
     
      4.
      }