Ext常用工具类与函数

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>


你可能感兴趣的:(Ext常用工具类与函数)