<!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的更多相关文章

  1. ExtJs之Ext.core.DomQuery

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. ExtJs之Ext.core.DomHelper.append

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  3. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  4. ExtJS初探：了解 Ext Core

    Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext ...

  5. ExtJS学习之路第二步：Ext.Component 和 Ext.dom.Element 的区别

    让我们来初步的探讨下Ext.Component和Ext.Element的区别. jQuery偏重于DOM元素的操作 1.每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的D ...

  6. ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）

    经常使用事件: 其它重要方法: 详细实例:(实例结果能够将相应的代码取消凝视进行測试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ t ...

  7. ExtJS得知--------Ext.Element学习的查询方法（示例）

    详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , ...

  8. ExtJS学习-------Ext正确Dom操作：Ext.get Ext.fly Ext.getDom

    详细实例: (1)创建JSP文件.引入CSS和js文件,加入三个Div <%@ page language="java" import="java.util.*&q ...

  9. Ext.dom.Element 常用方法解析

    Ext.dom.Element 常用方法解析 Ext.Element,Ext.core.Elemen,Ext.dom.Element 这几个类都是一个类,在EXT当中给起了别名而已,这个类到作用主要是 ...

随机推荐

  1. hdu 1548 A strange lift

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1548 A strange lift Description There is a strange li ...

  2. [quote ]ffmpeg, gstreamer, Raspberry Pi, Windows Desktop streaming

    [quote ]ffmpeg, gstreamer, Raspberry Pi, Windows Desktop streaming http://blog.pi3g.com/2013/08/ffmp ...

  3. 68.vivado与modelsim的关联以及器件库编译

    vivado软件中也自带仿真工具,但用了几天之后感觉仿真速度有点慢,至少比modelsim慢挺多的.而modelsim是我比较熟悉的一款仿真软件,固然选它作为设计功能的验证.为了将vivado和mod ...

  4. shell 简介

    shell 简介 shell既是一种命令语言,也是一种程序设计语言.作为命令语言,它交互式地解析和执行用户输入的命令:作为程序设计语言,他定义了各种变量和参数,并提供了许多的高级语言才具有的控制结构, ...

  5. 安装v2meet客户端 进入会议依然 提示 您还未安装视频会议的客户端,请下载安装

    解决办法 1.安装软件,要用管理员权限安装 2.装一个360浏览器,登录会议,这样就成功了.原装IE9却不行. 估计是IE9做了一些安全限制,由于时间关系就没有再处理了.

  6. [原创] zabbix学习之旅五：如何快速搭建一个报警系统

    通过之前的文章,我们已搭建好zabbix server.agent和mail客户端,现在万事俱备,只差在server的界面中进行相应配置,即可快速搭建一个报警系统.总的来说,快速搭建一个报警系统的顺序 ...

  7. @修饰符－－python中的装饰器

    装饰器模式可以在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责,也能够处理那些可以撤销的职责.经常用于日志记录.性能测试等场合. 想象一下这个很常见的场景,你写了一个方法只提供给以登陆的 ...

  8. eclipse 中卸载插件的方法

    卸载步骤: Help -> About Eclipse -> Installation Details -> "点到你要删除的插件,如EclipseME" –&g ...

  9. httpclient模拟浏览器get\post

    一般的情况下我们都是使用IE或者Navigator浏览器来访问一个WEB服务器,用来浏览页面查看信息或者提交一些数据等等.所访问的这些页面有的仅 仅是一些普通的页面,有的需要用户登录后方可使用,或者需 ...

  10. 【BZOJ】【3172】【TJOI2013】单词

    AC自动机 Orz zyf 玛雅一开始连题意都没看懂……意思就是给你一篇文章的N个单词,问每个单词在这篇文章中各出现了几次?(这篇文章=N个单词) 那么我们建个AC自动机……对于每个单词来说,它出现的 ...