<!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. 关于asp.net和iis的进程/线程问题，假如网站有1000个人访问，会产生多少个进程/线程啊

    详解 ASP.NET异步   超好的文章

  2. MVC4.0 如何设置默认静态首页index.shtml

    1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.Igno ...

  3. HTML/CSS的学习过程一览

    HTML/CSS的学习过程一览 说明 调试工具使用的是Google Chrome浏览器,其余浏览器出现的问题,这锅我不背[傲娇脸 可以使用浏览器查看源代码 网页列表 HTML_CSS_1 HTML基本 ...

  4. html5+ plus和phoneGap、cordova的比较

    偶遇大神言论,摘录 phonegap出的早,自然用的人多.phonegap自己的定位是混合开发hybrid,用原生+js:HBuilder的定位是纯js搞定一切.5+ 和 phonegap在能力.性能 ...

  5. 【转载】MyBatis之传入参数

    原文地址:http://blog.csdn.net/liaoxiaohua1981/article/details/6862764 在MyBatis的select.insert.update.dele ...

  6. 04.spring-data-redis与Jedis整合使用

    1.spring-data-redis与Jedis简单整合 spring-data-redis与Jedis简单整合,Redis没有任何集群只是单节点工作,使用连接池 1.创建spring-contex ...

  7. bzoj 1497 最小割模型

    我们可以对于消费和盈利的点建立二分图,开始答案为所有的盈利和, 那么源向消费的点连边,流量为消费值,盈利向汇连边,流量为盈利值 中间盈利对应的消费连边,流量为INF,那么我们求这张图的最小割,用 开始 ...

  8. 【BZOJ】【TJOI2015】线性代数

    网络流/最小割/最大权闭合图 2333好开心,除了一开始把$500^2$算成25000……导致数组没开够RE了一发,可以算是一次AC~ 咳咳还是回归正题来说题解吧: 一拿到这道题,我就想:这是什么鬼玩 ...

  9. 【BZOJ】【1012】【JSOI2008】最大数maxnumber

    线段树 ……现在再来看这题感觉好水啊,当年的大老虎现在也变成小花猫了,真是令人感动<_< /************************************************ ...

  10. 【BZOJ】【3907】网格

    组合数学/python 3907: 网格 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 162  Solved: 76[Submit][Status][ ...