您的位置：首页 > Web前端 > JavaScript

Ext Js入门第5篇-DOM元素常用操作

2017-05-23 19:30 316 查看

Ext.fly()，Ext.get()或者Ext.select()方法返回值是Ext.dom.Eclement和Ext.dom.CompositeElementLite对象，其实Ext.dom.CompositeElementLite对象继承了Ext.dom.AElement的所有方法。Ext.Element，Ext.dom.CompositeElementLite都可以启动动画

<body>
<div id="mydiv"></div>
</body>
<script>
//设置简单宽度，不使用动画
Ext.get("mydiv")
.setWidth(100);
//下面是启动动画
Ext.get("mydiv")
.setWidth(100,true);
//除此之外，还可以指定自定义动画
Ext.get("mydiv")
.setWidth(100,{
duration:1,//动画持续实践
easing:'elasticIn',//指定动画的执行方式
callback:this.foo//指定动画结束的回调函数
});
</script>

1.控制元素显示/隐藏方法

<body>
<div id="a" style="width: 200px;height: 80px;background-color: #aaa;"></div>
<button onclick="Ext.fly('a').setVisibilityMode(
Ext.dom.Element.VISIBILITY).show(true);">显示</button>
<button onclick="Ext.fly('a').setVisibilityMode(
Ext.dom.Element.VISIBILITY).hide(true);">隐藏</button>
<button onclick="Ext.fly('a').setVisibilityMode(
Ext.dom.Element.DISPLAY).setVisible(true,true);">完全显示</button>
<button onclick="Ext.fly('a').setVisibilityMode(
Ext.dom.Element.DISPLAY).setVisible(false,true);">完全隐藏</button>
</body>2.控制元素大小，位置

<body>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>
</body>
<script>
Ext.onReady(function()
{
Ext.select("div").setSize(200,80)
.setStyle("background-color","#afa")
.setStyle("border","1px solid black");
Ext.fly("a").setLocation(80,20);
Ext.fly("b").setX(120)
.setY(75);
Ext.fly("c").center();
}

);
</script>

3.元素插入的相关方法
Ext.dom.Element可控制元素内容的插入：

createChild(Object config,[HTMLElement inserBefore],[Boolean returnDom])根据config对象创建HTML元素，并将它插入insertBefore子元素之前

appendChild(String/HTMLElement/Ext.dom.Element e)将el代表的元素追加到当前的Ext.dom.Element包装的Html元素的尾部

类似的还有 appendTo(),insertAfter(),insertBefore(),insertFirst(),insertHtml(),.....<script>
Ext.onReady(function()
{
//被删除的元素
Ext.fly("removed").remove();
//在id为a的元素前部添加
Ext.fly("a").insertFirst(
{
tag:"div",
html:"添加的内容",
style:"background-color:#faa;"
});
//将ID为b的元素追加到ID为a的元素中
Ext.fly('a').appendChild('b');
});
</script>4.使用Ext.DomHelper,Ext.Template动态生成Html
Ext.DomHelper是一个工具类，它允许Dom或者Html创建HTML元素和HTML模板

常见方法有：

append(String/HTMLElement/Ext.dom.Element el,Object/String 0,[Boolean returnE])根据o参数创建一个Dom节点，并将它插入到Dom节点的最后一个子节点

还有applyStyle()，createDom()，createTemplate(),insertAftre()，insertBefore()，insertHtml()等<body>
<div id="a" style="height: 60px;border: 1px solid black;">fk</div>
</body>
<script>
Ext.onReady(function()
{
//将新创建的对象添加到a元素的最后一个子节点
Ext.DomHelper.append("a",
{
tag:"table",//指定创建表格
//下面两个属性直接附加到表格上
style:"border-collapse:collapse",
width:"540px",
//指定子元素，也可使用children属性
cn:[
{
tag:"tr",
html:"<td>三国演义</td><td>价格20</td>"
},
{
tag:"tr",
html:"<td>水浒传</td><td>价格44</td>"
}
]
}
);
//为所有td元素添加border样式
Ext.select("td").setStyle("border","1px solid black");
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航