1非常有用的Ext.core.Element
示例:
<script type="text/javascript">
Ext.onReady(function(){
var e1 = Ext.get("the-id");
var append1 = Ext.get("the-id-append");
function fn1(){
Ext.Msg.alert("提示", "您在id为'the_id'的Element上按下了ctrl+c键");
}
e1.addCls("special-css");//为元素添加样式表
append1.addCls("special-css");
append1.setWidth(240);
append1.setWidth(240, true);
e1.focus();//将焦点移到e1元素上
e1.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
e1.addClsOnOver("mouseover-css");//为鼠标移入移除时间添加和移除css类
e1.addClsOnClick("click-css");//为点击鼠标时间添加和移除css类
e1.setWidth(240);//将元素的宽度设为100像素
e1.setWidth(240, true);//将元素的宽度设为100并带有动画效果
e1.addKeyMap({key: "c", ctrl: true, fn: fn1, scope: e1});//绑定d1元素,当按下ctrl + c键时将呼叫fn函数
e1.addKeyListener({key: "g", ctrl: true}, fn1, e1);//和上面的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" οnclick="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>