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.
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.
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.
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.
}
5.
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
- 关键字: