`

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>

 

效果图：

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

图片

分享到：
| JS软键盘密码输入器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics