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

最新推荐文章于 2021-06-16 17:58:19 发布

淡忘过去努力未来

最新推荐文章于 2021-06-16 17:58:19 发布

阅读量441

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_29258777/article/details/72655079

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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 οnclick="Ext.fly('a').setVisibilityMode(
			Ext.dom.Element.VISIBILITY).show(true);">显示</button>
	    <button οnclick="Ext.fly('a').setVisibilityMode(
	    	Ext.dom.Element.VISIBILITY).hide(true);">隐藏</button>
	    <button οnclick="Ext.fly('a').setVisibilityMode(
	    	Ext.dom.Element.DISPLAY).setVisible(true,true);">完全显示</button>
	    <button οnclick="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>

淡忘过去努力未来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext Js入门第5篇-DOM元素常用操作

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

扫一扫

专栏目录