ExtJs之Ext.core.Element

<!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>

  

时间: 2024-08-09 00:53:36

ExtJs之Ext.core.Element的相关文章

ExtJS得知--------Ext.Element学习的查询方法(示例)

详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></d

ExtJS学习--------Ext.Element中的常用事件和其他重要的方法学习(实例)

常用事件: 其他重要方法: 具体实例:(实例结果可以将对应的代码取消注释进行测试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</d

ExtJS学习--------Ext.Element中的查询方法学习(实例)

具体实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></d

Ext.dom.Element 常用方法解析

Ext.Element,Ext.core.Elemen,Ext.dom.Element 这几个类都是一个类,在EXT当中给起了别名而已,这个类到作用主要是针对DOM元素操作的封装,使我们操作针对DOM操作更加方便了,而且底层屏蔽了浏览器到差异. 那么如何返回一个Ext.Element对象呢?通过Ext.get(el)就可以了. 参数 el : String/HTMLElement/Ext.Element(The id of the node, a DOM Node or an existing

ExtJs之Ext.ElementLoader.load

稍微书上代码不适合. var btns = Ext.select('input'); 需要更改为: var btns = Ext.select('input', true); 不然报错: [E] Ext.dom.Fly.addListener(): Cannot use addListener() on Ext.dom.Flyinstances. Please use Ext.get() to retrieve an Ext.dom.Element inst..... <!DOCTYPE htm

Ext.core.DomHelper.insertHtml参数的说明

今天在了解Ext.core.DomHelper.insertHtml过程中,发现 Ext.onReady(function(){ var panel = new Ext.Panel({ title:'Ext.core.DomHelper.insertAfter', width:300, height:200, renderTo:Ext.getBody(), frame:true, html:"<div id='div1'>原DIV1的内容</div>", but

ExtJS学习-------Ext对Dom的操作:Ext.get Ext.fly Ext.getDom

具体实例: (1)创建JSP文件,引入CSS和js文件,添加三个Div <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer

ExtJs之Ext.data.Store

ExtJs之Ext.data.Store Posted on 2009-07-21 09:09 linFen 阅读(44912) 评论(5) 编辑 收藏 Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示. store.each(function(record) { alert(record.get('name')); }); Each()

为什么Extjs继承Ext.data.Store不起作用

为什么Extjs继承Ext.data.Store不起作用:引起继承不起作用的原因可能是多种多样的,下面就分析其中的一种,或许能够对有类似情况的有所帮助. DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this.reader = new Ext.data.JsonReader( { totalProperty: