Extjs 基础篇—— Ext.DomHelper

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

javaPie

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

阅读量520

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章 5 订阅

订阅专栏

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. 
      }

这里需要注意：

{content}这个写法，相当于是传递参数或者EL表达式。

作者:wangyuelucky
原文:http://wangyuelucky.blog.51cto.com/1011508/1064742

关键字:

javaPie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs 基础篇—— Ext.DomHelper

Extjs 基础篇—— Ext.DomHelperPosted 周五, 11/23/2012 - 12:35 by adminExt.DomHelper是处理DOM或模板（Templates）的实用类。其实就是对原生的DOM操作进行封装、改进，让我们更加方便的操作DOM元素。Ext.DomHelper的主要方法如下：1.append( String/HTML
复制链接

扫一扫

专栏目录