Ext常用工具类与函数

来源:互联网 发布:南诏和大理知乎 编辑:程序博客网 时间:2024/05/01 16:58

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" 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>