<!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. PHP(一)

    最近一段时间一直忙于新版本的开发工作,所以虽然自己脑中有一些想法,但是苦于没有足够的时间去写下来.好了,昨天终于将大体的功能开发完成,时间上面也不会那么的紧张了.下来我想要好好的梳理一下,自己最近一段 ...

  2. 主要从架构上来做优化，负载均衡、CDN、静态化、数据库的水平切割和纵向切割、读写分离、分布式缓存着手

    语言知识一种工具,甚至技术本身也只是一种工具,本身并不值钱,关键在于用于何种行业,产生了什么价值. 但从语言来看,我个人更喜欢php,然后是C#,然后是java从框架而言,先是java,然后C#,再次 ...

  3. 001--VS2013 c++ 游戏框架

    头文件:MainClass.h 内容: #include <Windows.h> //全局函数声明LRESULT CALLBACK WndProc(HWND hwnd, UINT mess ...

  4. 霍夫变换（hough transform）

    x-y轴坐标:y=kx+b k-b轴坐标:b=-xk+y θ-r轴坐标:

  5. 38.基于FPGA的FIR设计二

    利用fdatool工具生成的滤波器系数与用代码生成的系数不一致,在网上查询得知,fdatool生成的滤波器系数是有符号小数,而且是浮点型,而代码生成的滤波器系数是定点型有符号数,故不一样. 浮点型数据 ...

  6. ubuntu 屏幕截图

    无意间发现这个组合 Fn+Shift+t,按下之后,鼠标变成一个十字, 选择一个范围,okay,可以截图了

  7. 通过修改注册表来破解sqlyog

    Sqlyog作为一款可视化的数据库管理工具,各种方便我就不说了,但是未经汉化或者绿色过的软件存在30天的生命期,到期后我们就不可以使用了,要摸卸载重装,我们还可以去修改注册表,来延长它的生命期,具体步 ...

  8. 在本地环境用虚拟机win2008 sever搭建VS2013 + SVN 代码版本控制环境

    此文仅仅是自己笔记做个备忘.因为自己开发一些中小型的软件经常需要修修改改,特别是winform界面的大改动.经常需要对版本进行管理.而租用分布式服务器和远程服务器都不是自己想要的.本文结合虚拟机 + ...

  9. 从浅到深掌握Oracle的锁

      1.分别模拟insert,update和delete造成阻塞的示例,并对v$lock中的相应的信息进行说明,给 出SQL演示. Insert示例 会话:SQL> select * from ...

  10. CentOS安装Nexus（Maven私有库）详细配置及上传本地jar到私服

    Nexus原理 Maven的原理就是将jar从远程中央仓库下载到PC磁盘的本地仓库,当本地仓库没有发现需要的jar就会去Maven默认的远程中央仓库Maven Central(由Apache维护)中寻 ...