ExtJs之Ext.core.Element
2016-03-22 09:40
531 查看
<!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>
相关文章推荐
- JS手机浏览器判断(转)
- js 解析json字符串
- jsp forward指令
- 给jsp页面加图片加载不出来的解决办法
- js进度条组件封装完结版
- 10、ExtJS入门教程【学习笔记】
- Jsp静态代码块和动态代码块
- 正则表达式模式匹配的String方法
- table表格排序js插件(高效简洁)
- 学习JS的第二天
- JavaScript
- 介绍一篇关于session的好文章,写的很详细(jsp-servlet 技术)
- 浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
- 详述JavaScript实现继承的几种方式(推荐)
- 基于javascript实现文字无缝滚动效果
- JS中多种方式创建对象详解
- javascript仿京东导航左侧分类导航下拉菜单效果
- javascript函数命名的三种方式及区别介绍
- 基于javascript制作经典传统的拼图游戏
- JS函数定义方式的区别介绍