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.

view source

print?

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

2.

view source

print?

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

3.

view source

print?

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.

view source

print?

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

5.

view source

print?

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

• 关键字: 
  • 中文教程, 
  • Extjs 基础, 
  • Extjs DomHelper, 
  • Extjs Dom