Ext学习笔记(2):Element使用Demo

77 阅读 0 评论 51 点赞

我是靠谱客的博主怕孤单蚂蚁，最近开发中收集的这篇文章主要介绍Ext学习笔记(2):Element使用Demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<html>
<head>


<script src="js/ext-all.js"></script>

<script type="text/javascript">
var ExtDomDemo={
childs:{//子元素标签
tag:'ul',
children:[
{tag:'li',html:'少壮不努力，老大徒伤悲'},
{tag:'li',html:'少壮不努力，老大徒伤悲'},
{tag:'li',html:'少壮不努力，老大徒伤悲'},
{tag:'li',html:'少壮不努力，老大徒伤悲'}
]
},
str:'<a style='color:red;'>追加成功，哈哈</a>'

};
/*页面加载完后处理的事件 */
Ext.onReady(function(){
/*为指定元素添加样式*/
Ext.fly("set").on({
'click':function () {
Ext.fly("mydiv").setStyle("backgroundColor","#C0C0C0");
//Ext.fly("mydiv").highlight();
}
});
/*为指定元素添加子节点*/
Ext.fly("addChilds").on({
'click':function () {
Ext.DomHelper.append('addChild',ExtDomDemo.childs);
}
});
/*为指定元素追加内容*/
Ext.fly("afterBegin").on({
'click':function () {
Ext.DomHelper.insertHtml('afterBegin',Ext.getDom('mydiv'),ExtDomDemo.str);
}
});
/*重写指定元素内容*/
Ext.fly("overwrite").on({
'click':function () {
Ext.DomHelper.overwrite('mydiv',ExtDomDemo.str);
}
});
/*使用模板重写指定元素内容*/
Ext.fly("createTemplate").on({
'click':function () {
/*方式一*/
/* var tepl=Ext.DomHelper.createTemplate("<b>{id}</b>,<h3>{content}</h3>");*/
/* tepl.overwrite('mydiv',{id:'No1',content:'zhangsan'});*/
/*方式二*/
var tepl=Ext.DomHelper.createTemplate("<b>{0}</b>,<h3>{1}</h3>");
tepl.overwrite('mydiv',['No1','zhangsan']);
}
});
/*查询某个元素*/
Ext.fly("DomQuery").on({
'click':function () {
/*var query=Ext.query("div");query <div> object
* alert(query);
* */
var query=Ext.DomQuery.selectNode("div");
alert(query.innerHTML);
}
});
/*使用属性选择器查询指定标签*/
Ext.fly("DomQueryClass").on({
'click':function () {
var query=Ext.DomQuery.selectNode("div[@class='classR']");
alert(query.innerHTML);
var evendivs=Ext.query("div:even");
Ext.each(evendivs,function (evendiv) {
evendiv.style.backgroundColor="blue";
alert(evendiv.innerHTML);
});
}
});
/*使用CSS选择器查询指定标签*/
Ext.fly("DomQueryCss").on({
'click':function () {
var evendivs=Ext.query("div{padding-left='5px'}");
Ext.each(evendivs,function (evendiv) {
alert(evendiv.innerHTML);
});
}
});
})
</script>
</head>
<body>
<div id="mydiv">Hello EXT</div>
<div id="addChild"></div>
<div id="select" class="classR">hello属性选择器</div>
<div id="evendiv" style="padding-left: 5px;">Hello EXT EVEN</div>
<button id="set">Hello Ext</button>
<button id="addChilds">添加子节点</button><br/>
<button id="afterBegin">在mydiv追加内容</button>
<button id="overwrite">重写mydiv内容</button>
<button id="createTemplate">使用Template重写mydiv内容</button>
<button id="DomQuery">使用DomQuery查询指定标签</button>
<button id="DomQueryClass">使用属性选择器查询指定标签</button>
<button id="DomQueryCss">使用CSS选择器查询指定标签</button><br>
</body>
</html>