ExtJs之Ext.core.Element
<!DOCTYPE html>
<html>
<head>
<title>ExtJs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var el = Ext.get("the-id");
var appendEl = Ext.get("the-id-append");
function fn1(){
Ext.Msg.alert("notice", "You press ctrl + c at the Element named the_id");
}
el.addCls("special-css");
appendEl.addCls("special-css");
appendEl.setWidth(240);
appendEl.setWidth(240, true);
el.focus();
el.addClsOnFocus("focus-css");
el.addClsOnOver("mouseover-css");
el.addClsOnClick("click-css");
el.setWidth(240);
el.setWidth(240, true);
el.addKeyMap({key: "c", ctrl: true, fn: fn1, scope: el});
el.addKeyListener({key: "g", ctrl: true}, fn1, el);
});
function callAppend(){
Ext.Msg.alert("notice", Ext.get("the-id-append"));
Ext.get("the-id").appendTo(Ext.get("the-id-append"));
}
</script>
</head>
<body>
<table border="0" cellspacing="3" cellpadding="3"><tr><td></td></tr></table>
<table border="0" cellspacing="1" cellpading="3" align="center" width="240" height="180" bgcolor="#3399cc">
<tr>
<td bgcolor="F3FAF9">测试样例</td>
</tr>
<tr>
<td bgcolor="#FBFFFF">
<div id="the-id">通过取得ELEMNET ID 为THE_ID的DIV并为该DEV绑定一些事事，如： 为鼠标移过此DIV时改变样式表等</div>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpading="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" cellpading="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>
ExtJs之Ext.core.Element的更多相关文章
- ExtJs之Ext.core.DomQuery
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- ExtJs之Ext.core.DomHelper.append
<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...
- ExtJS初接触 —— 了解 Ext Core
ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...
- ExtJS初探：了解 Ext Core
Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext ...
- ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别
让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...
- ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）
经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...
- ExtJS得知--------Ext.Element学习的查询方法（示例）
详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...
- ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom
详细实例: (1)创建JSP文件.引入CSS和js文件,加入三个Div <%@ page language="java" import="java.util.*&q ...
- Ext.dom.Element 常用方法解析
Ext.dom.Element 常用方法解析 Ext.Element,Ext.core.Elemen,Ext.dom.Element 这几个类都是一个类,在EXT当中给起了别名而已,这个类到作用主要是 ...
随机推荐
- hdu 1196 Lowest Bit
题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1196 Lowest Bit Description Given an positive integer ...
- adb 安装失败
打开Terminal终端:Ctrl + Alt + T 按顺序执行以下三条命令: sudo add-apt-repository ppa:nilarrimogard ...
- GNU make 总结 (四)
一.执行make程序 make的退出状态: 0 --- 表示执行成功 1 --- 表示执行make时使用了“-q”参数,而且当前工程中存在过时的目标文件 2 --- 执行过程中出现了错误,同时会提示错 ...
- [转]gdb结合coredump定位崩溃进程
[转]gdb结合coredump定位崩溃进程 http://blog.sina.com.cn/s/blog_54f82cc201013tk4.html Linux环境下经常遇到某个进程挂掉而找不到原因 ...
- 28335timer
/*****************************************************************************Copyright: 2014,TkaiFi ...
- JAVA数据结构-----栈
栈是Vector的一个子类,它实现了一个标准的后进先出的栈. 堆栈只定义了默认构造函数,用来创建一个空栈. 堆栈除了包括由Vector定义的所有方法,也定义了自己的一些方法. 栈常用的五个方法: bo ...
- python中将字符串转化为本地变量
var = 123445s= locals()['var']s2=vars()['var'] print s,s2
- Vue2.0的通用组件
饿了么基于Vue2.0的通用组件开发之路(分享会记录) Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...
- cocos游戏的真正入口,用C++实现的demo版本
1.cocos游戏的出发点 在main函数中有一句: return CCApplication::sharedApplication()->run(); 2.经过层层深入发现,真正的入口: ...
- Java令牌生成器
package Token; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; im ...