EXTJS4之常用工具类与函数--Ext.core.Element

来源：互联网发布：好玩的rpg 知乎编辑：程序博客网时间：2024/04/18 19:02

Ext.core.Element是所有组件及控件操作的基础，是一个DOM对象的包装，加入了DOM的操作处理，并根据不同的浏览器进行处理。该类的所有实例都是像我们展示通过DOM继续EXT.fx.Anim的视觉效果。该类的事件并不是Ext底层事件，而是封装浏览器事件。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" /><script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script><script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script><style type="text/css">.special-css{font-size:11pt;color:#CC0000;padding:5px; }td{font-size:11pt;color:black;padding:5px; }.click-css{font-size:11pt;color:green;padding:5px; }.focus-css{font-size:11pt;color:yellow;padding:5px; }.mouseover-css{font-size:11pt;color:blue;padding:5px; }</style><script language="javascript">Ext.onReady(function(){var el = Ext.get("the-id");var appendEl = Ext.get("the-id-append");function fn1(){Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");}el.addCls("special-css");//为元素添加样式表appendEl.addCls("special-css");appendEl.setWidth(240);appendEl.setWidth(240, true);el.focus();//将焦点移到el元素上el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类el.addClsOnClick("click-css");//为点击事件添加和移除css类el.setWidth(240);//将元素的宽度设为100相素el.setWidth(240, true);//将元素的宽度设为100并带有动画效果el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不同 }); function callAppend(){Ext.Msg.alert("提示",Ext.get("the-id-append").getComputedWidth());Ext.get("the-id").appendTo(Ext.get("the-id-append"));//将the-id追加到the-id-append元素 }</script></head><body><table border="0" cellspacing="3" cellpadding="3"><tr><td></td></tr></table><table border="0" cellspacing="1" cellpadding="3" align="center" width="240" height="180" bgcolor="#3399CC"><tr><td bgcolor="#F3FAF9">测试样例</td></tr><tr><td bgcolor="#FBFFFF"><div id="the-id">　　通过取得Element id为“the_id”的div并为该Div绑定一些事件，如：为鼠标移过该Div时改变样式表等</div></td></tr></table><table border="0" cellspacing="0" cellpadding="0" align="center" width="240" height="40"><tr><td align="left"><input type="button" value="点击查看追加效果" id="bt1" onclick="callAppend()"></td></tr></table><table border="0" cellspacing="1" cellpadding="3" align="center" width="240" height="180" bgcolor="#3399CC"><tr><td bgcolor="#F3FAF9">追加元素</td></tr><tr><td bgcolor="#FBFFFF"><div id="the-id-append">　　被追加的元素</div></td></tr></table></body></html>

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt {background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }