`

EXT事件队列

    博客分类:
  • Ext
ext 
阅读更多
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>事件队列</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
     <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css">
 <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="../../ext/ext-all.js"></script>
 <script type="text/javascript">
  Person = function(){
   // 注册事件
   this.addEvents("idChangeEvent","nameChangeEvent");
  };
  Ext.extend(Person,Ext.util.Observable,{
   id:0,
   name:"",
   setId:function(_id) {
    if (this.id != _id) {
     // 发布事件
     this.fireEvent("idChangeEvent",this,this.id,_id);
     // 如果新的id与原来的id不一样,则将新的id的值设置到当前对象的id上。
     this.id = _id;
    }
   },
   setName:function(_name){
    if (this.name != _name) {
     // 发布事件
     this.fireEvent("nameChangeEvent",this,this.name,_name);
     this.name = _name;
    }
   },
   print:function(){
    alert(String.format("id={0},name={1}",this.id,this.name));
   }
  });
  
  var person = null;
  btn_click = function(){
   person.setId(prompt("请输入编号:"));
   person.setName(prompt("请输入姓名:"));
  };
  
  Ext.onReady(function(){
   var id_txt = Ext.get('id_txt');
   var name_txt = Ext.get('name_txt');
   person = new Person();
   /**
   * idChangeEvent事件触发2次,
   * 第一次用来设置文本框的值。
   * 第二次用来设置文档的标题。 
   */
   person.on('idChangeEvent',function(person,old,_new){
    id_txt.dom.value = _new;
   });
   person.on('nameChangeEvent',function(person,old,_new){
    name_txt.dom.value = _new;
   });
   person.on('idChangeEvent',function(person,old,_new){
    document.title = _new;
   });
  });
  
 </script>
  </head>
  
  <body>
    <h4>Ext事件队列</h4>
    编号:<input type='text' id='id_txt' disabled="disabled"><br>
    姓名:<input type='text' id='name_txt' disabled="disabled"><br>
    <input type="button" onclick="btn_click();" value='输入信息'>
    <input type="button" onclick="person.print();" value='获取输入信息'>
    
  </body>
</html>

 

效果图:

图片
单击“获取输入信息”。

图片

分享到:
评论

相关推荐

    Ext实现java的面向对象实例

    10. **事件队列**:在Ext中,事件队列是一种处理异步操作的方式,它确保了事件按照一定的顺序进行处理。事件监听者注册后,当触发事件时,事件会被加入到队列并按顺序执行。 了解并掌握这些Ext的面向对象特性,有助...

    ext结合swfUpload 多选文件上传

    文件上传过程中,SWFUpload会自动创建一个文件队列,我们可以利用EXTJS的数据绑定机制,将队列信息实时展示在界面上,比如使用EXT的表格(`Ext.grid.Panel`)显示每个文件的名称、大小、状态等信息。此外,还可以...

    ext 文件上传

    5. **上传事件监听**:如何注册事件监听器,如文件选择事件(change)、文件添加到队列事件(enqueue)和上传进度事件(uploadprogress)。 6. **上传策略**:单文件上传与多文件上传的实现方式,批量上传的优化...

    Ext.ux.UploadDialog

    5. **事件监听**:UploadDialog提供了丰富的事件接口,如文件选择、开始上传、上传成功和失败等,方便开发者根据这些事件触发相应的业务逻辑。 6. **服务器端集成**:UploadDialog通常需要与服务器端的脚本配合,...

    ext+hibernate+spring 入库的实例

    Spring还提供了与各种数据库、模板引擎、消息队列等集成的能力,极大地提高了开发效率。 当EXT、Hibernate和Spring结合使用时,可以构建出强大的Web应用。在入库实例中,EXT作为前端展示,负责用户的交互界面;...

    Ext2+SwfUpload(最新版)构建文件上传框

    3. **处理事件**:注册`SwfUpload`的事件监听器,例如`fileQueued`、`uploadProgress`和`uploadComplete`,以便在文件被添加到队列、上传过程中和上传完成后执行相应的操作。 4. **集成到Ext2的布局**:将自定义组件...

    Ext.fx动画特效用法(转)

    2. **动画队列**:使用`Ext.fx.Queue`可以将多个动画组成队列,按照指定顺序依次执行。 五、最佳实践 1. **性能优化**:尽量减少不必要的动画,避免过度使用导致性能下降。 2. **用户体验**:确保动画的使用能提升...

    upload_Ext实现上传功能

    `upload_Ext` 可能允许用户一次选择多个文件进行上传,这需要对文件队列进行管理,并依次处理每个文件。 9. **安全考虑**:在实现文件上传时,安全性是非常重要的一环。防止恶意文件上传、限制文件大小和类型、确保...

    ExtJS 多文件上传 UploadDialog For ExtJS3.x

    `Ext.ux.Utils.EventQueue`类的主要功能是处理事件队列,其实现如下: ```javascript Ext.ux.Utils.EventQueue = function(handler, scope) { if (!handler) { throw 'Handler is required.'; } this.handler =...

    ext-dwr-spring集成Demo

    此外,Spring与各种数据库、缓存、消息队列等技术的集成,使得开发大型企业级应用变得更加便捷。 在"ext-dwr-spring集成Demo"中,EXT负责前端的用户交互和界面展示,DWR作为中间层,处理Ajax通信,使前后端能够实时...

    concurrent_ext:通过设置线程池队列大小解决解决执行堆栈已满的情况下,主进程还在不断添加任务,会导致内存爆满

    "concurrent_ext"这个项目显然关注的就是如何通过设置线程池的队列大小来避免这种情况。 线程池(ThreadPoolExecutor)是Python标准库`concurrent.futures`模块中的一个关键组件,它允许我们预先创建一定数量的线程...

    xhci-ext-caps.rar_host

    1. **多队列支持**:xHCI支持多个队列来同时处理多个USB事务,提高系统并发性能。扩展capabilities可能增加了更多的队列管理机制,以优化性能。 2. **电源管理**:扩展capabilities可能包含针对低功耗模式的支持,...

    redis-ext:Redis-ext 通过 Redis Sentinel 扩展了具有故障转移支持的 nodejs redis 客户端

    它还提供基本的作业队列实现。 该模块正在生产环境中使用。 安装 npm install redis-ext 用法 创建 Sentinel 感知连接: var redis = require('redis-ext') , _sentinels = [ {host: "localhost", port: ...

    ext + spring + jms 开发 web桌面oa管理系统

    JMS是消息队列的规范,常用于解耦应用组件,实现异步通信。在OA系统中,JMS可能被用来处理在线消息传递,如“在线消息(JMS).jpg”所示,员工间的沟通、通知、任务分配等可以通过消息服务实时传输,提高系统效率。...

    xhci-ext-caps.rar_V2 _xhci_xhci driver

    1. **多队列支持**:xHCI控制器可能支持多个并发传输队列,这可以提高系统处理大量USB设备的能力,特别是当有多个高速设备同时传输数据时。 2. **电源管理功能**:扩展能力可能定义了硬件如何有效地管理能源,如低...

    amqp-ext:[只读]兼容队列互操作的AMQP协议。 基于php amqp扩展

    支持队列 Enqueue是麻省理工学院许可的开源项目,其持续发展完全取决于社区和我们客户的支持。 如果您想加入他们,请考虑: AMQP运输 这是的实现。 它内部使用PHP 。 资源 由Forma-Pro开发 Forma-Pro是一家全栈开发...

    ASP.NET批量上传SwfUpload-Ext

    SwfUpload的实例化通常在JavaScript中完成,通过监听SwfUpload的各种事件(如文件选择、文件上传开始、上传进度、上传成功等),与ExtJS的组件进行交互,更新UI状态。 在服务器端,你需要使用ASP.NET来接收和处理...

    MQ安装配置

    包括批量接收队列(PBC.202710000010.BATCH.OUT)、实时接收队列(PBC.202710000010.ONLINE.OUT)、批量传输队列(PBC.2600.BATCH.TRAN)、实时传输队列(PBC.2600.ONLINE.TRAN)、批量发送队列(PBC.EXT.BATCH.IN)...

    extjs 学习笔记(二) Ext.Element类

    总之,`Ext.Element`是EXTJS中用于处理DOM元素的核心工具,它提供了丰富的API来进行样式修改、布局调整、事件监听以及动画效果。了解`Ext.fly`和`Ext.get`的差异以及如何有效利用`Ext.Element`的方法链,对于编写...

    IBMMQ安装和配置.doc

    - PBC.EXT.ONLINE.IN - 实时发送队列,用于发送实时报文。 **配置通道** 通道在IBM MQ中扮演着通信路径的角色,连接不同的队列管理器,实现消息的发送和接收。我们创建了5个通道,分别是: - 202270000010.2600.B1 ...

Global site tag (gtag.js) - Google Analytics