<!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. golang的序列与反序列化

    golang写backend之类的应用,还是挺方便的...使用encoding/json包时, 必须注意, 在struct定义的属性必须是exported, 否则不会设置值. 例如:type DRol ...

  2. 初识java之Mina（一）

    Apache Mina Server 是一个网络通信应用框架,也就是说,它主要是对基于 TCP/IP.UDP/IP协议栈的通信框架(当然,也可以提供 JAVA 对象的序列化服务.虚拟机管道通信服务等) ...

  3. iOS学习之界面通信

    一.属性传值 在SecondViewController.h里 #import <UIKit/UIKit.h> @interface SecondViewController : UIVi ...

  4. Google工程师打造Remix OS系统 桌面版安卓下载

    三位前Google工程师打造的Remix OS系统终于来到了PC桌面上,现已可以下载尝鲜. Remix OS for PC基于Android-x86项目,由安卓5.1 Lollipop深度定制而来,不 ...

  5. （转）ZooKeeper 笔记(1) 安装部署及hello world

    ZooKeeper 笔记(1) 安装部署及hello world   先给一堆学习文档,方便以后查看 官网文档地址大全: OverView(概述) http://zookeeper.apache.or ...

  6. GHOST -ntexact 正常还原

    我常常用PE启动电脑,用PE下的GHOST软件恢复备份的系统,但最近恢复WIN10备份时出了问题,出现25002错误,恢复其他备份正常,原因不明 解决办法是在PE中运行CMD,启动DOS,然后进入GH ...

  7. 从烙铁手到IT男

    时间:2015年8月27日 21:37:44 作者:luomg 摘要: 简要记录一写自己干的这个行当,多少是个回忆,不然某一天呜呼哀哉了啥也没有记录,会随着时间更新(大学时熬夜绘制了很多altium ...

  8. A taste of urllib3

    import urllib3 import certifi http = urllib3.PoolManager( cert_reqs='CERT_REQUIRED', # Force certifi ...

  9. 运算符 swift

    1nil聚合运算符 nil coalescing operator a ?? b ==>a!=nil ? a! : b 要求: 1a是一个可选类型 2b必须和a解包后类型一致 var userN ...

  10. 在EDK里面添加ISE IP core的方法

    (1)在ISE下,使用core generator,可以得到xilinx的IP的*.v和*.ngc 文件,将这两个文件拷贝出来: (2)在EDK下使用“Create or Import Periphe ...