ExtJS事件处理

最新推荐文章于 2019-01-11 14:37:32 发布
最新推荐文章于 2019-01-11 14:37:32 发布
阅读量779 收藏 1
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenkeqin_2012/article/details/8499586
版权

1、标准的事件绑定方式(1)

<html>
 <head>
  <title>标准的事件绑定方式(1)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <script language="JavaScript">
 function hello(){ alert('hello'); }
 </script>
 <body>
 <input type='button' id='btn' value='ok' οnclick='hello()'>
 </body>
</html>

2、标准的事件绑定方式(2)只适合IE浏览器 document.getElementById('btn').attachEvent('onclick',hello1);

<html>
 <head>
  <title>标准的事件绑定方式(2)</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <input type='button' id='btn' value='ok'>
 </body>
<script language="JavaScript">
 function hello1(){
  alert('hello1');
 }
 function hello2(){
  alert('hello2');
 }
 var button = document.getElementById('btn');
 button.attachEvent('onclick',hello1);//该方法适用于IE浏览器
 button.attachEvent('onclick',hello2);
</script>

3、ExtJS方式的事件绑定

<HTML>
 <HEAD>
  <TITLE>ExtJS方式的事件绑定</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
   <script type="text/javascript">
 Ext.onReady(function(){
  function hello1(){
   alert('hello1');
  }
  function hello2(){
   alert('hello2');
  }
  var button = Ext.get('btn');
  button.addListener('click',hello1);//绑定事件处理函数
  button.addListener('click',hello2);
 });
  </script>
 <BODY>
  <input type='button' id='btn' value='ok'>
 </BODY>
</HTML>

4、ExtJS支持的自定义事件

<HTML>
 <HEAD>
  <TITLE>ExtJS支持的自定义事件</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">
  //创建Person类
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.sayNum = 0;
      this.say = function(){
     if(this.sayNum < 2){
      this.sayNum += 1;
      alert('I am '+name);
     }else{
      this.sayNum = 0;//触发自定义事件后计数器归零
      this.fireEvent('onSay',this);//激发自定义事件
     }
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象
  //为自定义事件绑定处理函数
  per.addListener('onSay',function handler(){
   alert('发生了自定义事件');
  });
 </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' οnclick='per.say()'>
 </BODY>
</HTML>

5、Firefox浏览器addEventListener方法示例

<html>
 <head>
  <title>Firefox浏览器addEventListener方法示例</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
  <input type='button' id='btn' value='ok'>
 </body>
<script language="JavaScript">
 function hello1(){
  alert('hello1');
 }
 function hello2(){
  alert('hello2');
 }
 var button = document.getElementById('btn');
 button.addEventListener('click',hello1,false);
 button.addEventListener('click',hello2,false);
</script>
</html>

6、适合IE

<HTML>
 <HEAD>
  <TITLE>addListener绑定处理函数示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
        //继承自Ext.util.Observable
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.say = function(){
     this.fireEvent('onSay',this.name);//激发自定义事件
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象
  function test(name){
   alert("I'am " + name);
  }

  //为自定义事件绑定处理函数
  per.addListener('onSay',test(name));
  
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' οnclick='per.say()'>
 </BODY>
</HTML>

7、使用各种浏览器

<HTML>
 <HEAD>
  <TITLE>addListener绑定处理函数示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
        //继承自Ext.util.Observable
  var Person = Ext.extend(Ext.util.Observable,{
   constructor : function(name){
      this.name = name;
      this.say = function(){
     this.fireEvent('onSay',this.name);//激发自定义事件
      }
      this.addEvents({//加入自定义事件
      "onSay" : true
      });
   }
  });
  var per = new Person('tom');//创建对象

  //为自定义事件绑定处理函数
  per.addListener('onSay',function(name){
   alert("I'am " + name);
  });
  
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' οnclick='per.say()'>
 </BODY>
</HTML>

8、

<HTML>
 <HEAD>
  <TITLE>拦截器使用示例Observable.capture</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
 //继承自Ext.util.Observable
 var Person = Ext.extend(Ext.util.Observable,{
  constructor : function(name){
     this.name = name;
     this.say = function(){
    this.fireEvent('onSay',this.name);//激发自定义事件
     }
     this.addEvents({//加入自定义事件
     "onSay" : true
     });
  }
 });
 var per = new Person('tom');//创建对象
  
 per.addListener('onSay',handler);//为自定义事件绑定处理函数
 function handler(){//事件处理函数
  alert('发生了自定义事件');
 }
 //为per对象添加拦截器
 Ext.util.Observable.capture(per,captureFunction);
 //拦截函数
 function captureFunction(eventName){
  if(eventName == 'onSay'){//事件名称是onSay则返回false终止事件的执行
   alert("拦截事件：“"+eventName+"”。");
   return false;
  }
  return true;
 }
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' οnclick='per.say()'>
 </BODY>
</HTML>
9、

<HTML>
 <HEAD>
  <TITLE>addManagedListener受管事件监听器</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
    <STYLE TYPE="text/css">
 .newIcon { background-image: url(../chapter03/images/new.gif) !important; }
 .openIcon { background-image: url(../chapter03/images/open.gif) !important; }
 .saveIcon { background-image: url(../chapter03/images/save.gif) !important; }
  </STYLE>
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
<BODY STYLE="margin: 10px"></BODY>
  <script type="text/javascript">
 Ext.onReady(function(){
  function createFn(){
   alert('新建');
  }
  function openFn(){
   alert('打开');
  }
  function saveFn(){
   alert('保存');
  }
  Ext.create('Ext.toolbar.Toolbar',{//创建工具栏
   renderTo: Ext.getBody(),
   bodyPadding: 5,
   width:300,
   items : [
       {text:'新建',id:'createBtn',iconCls:'newIcon'},
    {text:'打开',id:'openBtn',iconCls:'openIcon'},
    {text:'保存',id:'saveBtn',iconCls:'saveIcon'},
    {text:'销毁新建按钮',id:'destroy1',handler : function(){
     //销毁新建按钮
     Ext.getCmp('createBtn').destroy();
     Ext.getCmp('destroy1').destroy();
    }}
   ]
  });
  var createBtn = Ext.getCmp('createBtn');
  createBtn.on('click',createFn);
  //以下的事件绑定将受createBtn组件是否销毁的控制，如果createBtn组件销毁
  //了则事件绑定同时解除。
  createBtn.addManagedListener(Ext.getCmp('openBtn'),'click',openFn);
  createBtn.addManagedListener(Ext.getCmp('saveBtn'),'click',saveFn);
 });
  </script>
</HTML>
10、

<HTML>
 <HEAD>
  <TITLE>relayEvents传播分发事件</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">
  //创建Employee工人类
  var Employee = Ext.extend(Ext.util.Observable,{
   constructor : function(config){
      this.name = config.name;
      this.eat = function(){
     this.fireEvent('startEat',this);//激发开始吃饭事件
     this.fireEvent('finishEat',this);//激发结束吃饭事件
      }
      this.addEvents({//加入自定义事件
      "startEat" : true,//开始吃饭事件
      "finishEat" : true//结束吃饭事件
      });
      Employee.superclass.constructor.call(this, config)
   }
  });
  
  //定义Waiter服务员类
  var Waiter = Ext.extend(Ext.util.Observable,{
   constructor : function(config){
    Waiter.superclass.constructor.call(this, config);
   }
  });
  //创建员工对象
  var emp = new Employee({name:'tom'});
  //为自定义事件绑定处理函数
  emp.addListener('startEat',function(){
   alert(this.name + '开始吃饭了。');
  });
  emp.addListener('finishEat',function (){
   alert(this.name + '吃完饭，可以收拾盘子了。');
  });
  //创建服务员对象
  var waiter = new Waiter();
  //使服务员对象与员工对象的finishEat事件进行关联
  //也就是说当员工对象的finishEat事件发生后，先执行自身的事件监听器，
  //然后事件会传递到服务员对象中，激发服务员对象的finishEat事件。
  waiter.relayEvents(emp, ['finishEat']);
  waiter.on('finishEat',function(){
   alert('服务员开始收拾盘子。');
  });
 </script>
 </HEAD>
 <BODY>
 <input type='button' value='员工吃饭' οnclick='emp.eat()'>
 </BODY>
</HTML>

11、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.EventObject示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
 </HEAD>
<BODY>
 <input id='buttonTest' type='button' value='click'>
</BODY>
<script type="text/javascript">
 var btn = Ext.get('buttonTest');
 btn.addListener('click',handler);//为click事件绑定处理函数
 function handler(e){//事件处理函数
  //获取事件发生时的x坐标
  var x = e.getPageX();
  //获取事件发生时的y坐标
  var y = e.getPageY();
  var msg = '事件发生坐标 : x='+x+' y='+y;
  alert(Ext.EventManager.getPageXY(e));
  alert(msg);
 }
</script>
</HTML>
1、

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.EventManager应用举例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/src/core/src/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
   Ext.EventManager.addListener('btn','click',handler);//绑定处理函数
   function handler(e){//事件处理函数
    //获取事件发生时的x坐标
    var x = e.getPageX();
    //获取事件发生时的y坐标
    var y = e.getPageY();
    var msg = '事件发生坐标 : x='+x+' y='+y;
    alert(Ext.EventManager.getPageXY(e));
    alert(msg);
    alert('hello');
   }
   /**function handler(){//事件处理函数
    alert('hello');
   }*/
  });
  </script>
 </HEAD>
 <BODY>
 <input type='button' value='say' id='btn'>
 </BODY>
</HTML>

绿源2008
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 事件处理 动态载入
05-24
以上就是关于ExtJS事件处理和动态载入的基本概念和用法。通过熟练掌握这些技术，开发者可以创建出高度交互、响应迅速且数据管理高效的Web应用程序。在实际项目中，还可以结合文档和示例代码（如提供的文档和教程）...
ExtJs事件处理 ajax
08-15
下面将详细解释标题和描述中提到的ExtJs事件处理，以及与Ajax交互的相关知识。 1. **基本事件处理** - 在ExtJs中，可以使用`on`方法来监听DOM元素或Ext组件的事件。例如，监听ID为'somelink'的元素的点击事件，...
Extjs学习 事件处理
jazywoo_在路上
07-14 674
一、addListener方法 Javascript代码   var button = Ext.get('btn');    button.addListener('click',hello1);//绑定事件处理函数    button.addListener('click',hello2);   二、ExtJS支持的自定义事件 Ja
ExtJs之事件绑定
清风自来
01-11 1496
总结一下为gridpanel添加双击事件的不同方法： 1、不在同一界面，但又需要调用父界面的方法 dangergoodsLocationGridPanel.on({ calldblclick : function(s, td, cellIndex, record, tr, rowIndex, e, eOpts) { me.browseRecord(); } }); 2）普通事件的添加 a...
[extjs3.4]解除Ext.Button的原生click事件处理
wzp1986的专栏
05-05 1570
Ext.EventManager.removeListener(btn.el, 'click', btn.onClick); 使用Element与Component的un方法无效。
EXT 删除 监听
weixin_30510153的博客
10-26 330
想做一个效果：使用Ext验证textfield中数据，一旦数据有效就初始化某个模块。 试了好多 监听事件，只有“valid”事件可以，但是其验证分为好几次，我猜测可能是有首先验证表单有效性，然后验证数据有效性，即，“valid”事件监听一次，触发多次。在加载完成后，如果还存在此监听，很麻烦的，所以有必要去掉。 移除该事件使用 Ext.removeListener()方法，简写为un(un是添加...
extjs事件 事件监听 事件委托
叮咚侠的博客
06-14 1391
原文链接:http://blog.sina.com.cn/s/blog_647a022e01014zzf.html function handleClick(e){//e是Ext.EventObject e.preventDefault(); var target = e.getTarget(); } Ext.EventManager.on('myDiv','click',h
ExtJS 工具栏 分页事件参数
10-29
在上面的代码中，我们还定义了一个 `doLoad` 函数，该函数用于处理分页事件。该函数将当前页码 `start` 作为参数，并将其传递给 `store.load` 方法。 例如，当单击下一页时，我们可以使用以下代码： ```javascript ...
extjs 为某个事件设置拦截器
10-29
这一点提供了强大的灵活性，允许在事件处理的早期阶段决定事件的最终命运。 需要注意的是，可以为同一个对象设置多个拦截器，这些拦截器按照添加的顺序形成一个处理链条。一旦链条中的任何一个拦截器返回false，...
ExtJS 事件笔记
08-27
5. **ExtJS事件处理**： - ExtJS提供了自己的事件系统，可以通过`on`或`addListener`方法注册事件处理函数，如`obj.on('click', this.XXX)`。 - **组件事件**：对于Ext.Component的事件，Ext3.0引入了`mon`方法，...
向ext的form表单元素添加click监听事件
生活没了创意，那跟咸蛋有什么区别
01-07 4912
Ext2，向form表单的元素添加监听事件(listener)，见下文描述的click响应事件.
监听表单事件 learning extjs 中文
guoyiqi
02-07 110
监听表单事件 Ext让监听单击控件或按键等用户事件变得异常简单。一个通常的事件就是按回车然后提交表单，让我们来看下这是怎么完成的。 {//copy right guoyiqi 2009-2-6 xtype: 'textfield', fieldLabel: 'Title', name: 'title', allowBlank: false, listeners: { special...
extjs组件添加事件监听的三种方式
Y_FQY的博客
10-13 746
1.在定义组件配置的时候设置[javascript] view plain copy xtype : ‘textarea’, name : ‘dataSetField’, labelSeparator:”, fieldLabel:”, hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:’99%
Ext Js入门第7篇-Ext js事件处理
qq_29258777的博客
05-24 721
1.使用Ext.EventManager管理事件处理函数与Ext.EventObject事件对象 Ext.EventManager是专门用于管理事件处理函数的工具类，该工具类包括以下方法：                  （1）addListener(String/HTMLElement el,String event,Function handler,[Object scope],[Obj
extjs中的事件监听方法
沉浮
06-05 9101
事件监听方法： （1） 这个方法主要给dom对象来监听事件              Ext.get(document).on('事件',function(){ 处理方法}); （2）写在容器里面 如panel         listeners｛'事件',function(){处理方法}｝; （3）对定义的js类进行事件监听        var eastpanel=new Ext.
Ext中的监听事件的几种形式
csdn_duanjiao2016的博客
08-01 6249
目前发现在ext中有三种绑定监听器的形式：      1.在控件初始化时，添加一个listeners的配置项：              listener：{               ‘select’ ： 方法体名称，               scope   ：作用域             }       2.在外部的界面初始化等相应的处理中添加：使用on或者
ExtJS快速入门指南
热门推荐
励志的蜗牛
11-15 2万+
1 ExtJS快速入门指南 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
Ext使用总结（一）
wxg6203的专栏
06-09 1138
  一、获取元素（Getting Elements） 1.Ext.get var el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存。 注：享元模式（Flyweight De...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值