EXT按钮事件

Java架构师必看

发布于 2021-03-22 12:02:47

2.7K00

代码可运行

文章被收录于专栏：Java架构师必看Java架构师必看

运行总次数：0

代码可运行

在EXT中，当我们要为按钮点击添加处理function的时候，可以看到一般人的实现分成2类：

1.使用onClick: function xx()

2.使用handler: function xx()

完成后，我们会发现，无论用哪一种实现，再点击按钮时都能触发xx这个function. 那么有人就会考虑，为什么EXT提供了2个功能一样的东西，或者说这2种方式有哪些细微的不同？

首先有一点需要明确，在Button中，onClick是一个方法，而handler是一个配置项。

接着，为了明确这2种方式本质上的区别，我们查看Button的源码：

// private
     onClick : function(e){
             ......一系列其他无关的代码
             if(this.handler){
                 //this.el.removeClass('x-btn-over');
                 this.handler.call(this.scope || this, this, e);
             }
         }
     },

源码中可以看到，handler在onClick的实现中被调用。进一步分析，我们点击按钮的时候，又是如何会调用onClick的？看下面一段源码：

// private
    initButtonEl : function(btn, btnEl){
       ......一系列无关的代码
        if(this.repeat){
           ......一系列无关的代码
            this.mon(repeater, 'click', this.onRepeatClick, this);
        }else{
            this.mon(btn, this.clickEvent, this.onClick, this);
        }
    },

在初始化button的el的时候，Ext通过this.mon将 'click'事件和onClick绑定在了一起。（注：这里mon方法是Ext3.x中对on方法的升级版，为了防止内存泄漏之类的）。

综上，整个流程便是： Button实例化——> 'click'事件 ——>this.onClick——>this.handler

因此，我们配置了handler，在按钮点击的时候，自然会被触发。然而另一种方式写了onClick之后哦，this.handler会失效。onClick的方式是对EXT源码的重写和覆盖，而不是调用，会破坏EXT按钮中原有的逻辑。

同时可以注意到，onClick在源码中是被标注为//private的，API中也查不到这个方法。所以在实现按钮的点击事件的时候，我们应该使用handler这个配置项，而不是重写onClick方法。

handler与listener的区别

ExtJS里handler和listener都是用来对用户的某些输入进行处理的，有必要区分一下各自都是怎么用的。

Handler

handler与Action相关联，一个Action可以有多个Component引用；

Action是一个可被共享的对象，有五个主要的属性：text, handler, iconCls, disabled, hidden

component的构建方式比较有意思：

new Ext.Button(action)

是Button接收一个Action对象作为构造参数吗？但是查看Button的API却没有发现action属性。反而Button的构造参数是一个(Object config)，也就是说，只是一个配置对象（包含各种属性），而Action的五个属性正好Button也都有，所以，可以接收一个Action来进行构造。

其他属性不考虑，看handler，Button中的handler配置项文档说明，这个handler是与click Event关联的。也就是说，click是Button这个Component的首要Event（参考Action中handler的文档），这就是Handler的运行方式：被某个组件的首要Event所触发。

Listener

上面说了handler是对首要Event的响应函数，而关于Event, Observable才是根源。

Ext.util.Observable是一切可进行事件监测之对象的父类（或者接口）。Observable只有一个配置项，那就是listeners，而一个listener是一个事件名 + 处理函数的组合，如：

"click" : function(){...}, "mouseOver" : function(){....}

Observable还提供了很多相关的处理事件的方法，比如添加事件，触发事件，移除监听器等等。

由上分析可以总结一下：

1、handler是一个特殊的listener；

2、handler是一个函数，而listener是<event , 函数>对；

3、handler与Action相关，用来让多个组件共享一个Action。而listener与Event相关，可以对Event进行方便的管理；

但是handler与普通的event + listener组合还是有一些不同，一个例子就是，如果用

Ext.util.Observable.capture(button, function(name){ if (name=="click") return false})

来事先捕获click事件，并阻止click时，如果Button的click是通过handler来响应的，则capture的return false函数无效，而如果button是定义了包含click事件的listener，则上面的capture生效。

按钮事件

<html>
<head><title>演示</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" media="all" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
 <script src="extjs/build/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
	var buttonName = new Ext.Button({
  id:"buttonName",
               text:"这是一个按钮",
               //tooltip:"提示信息：Button组件基本用法",
   //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();

              //tooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtip

              type:"button", //按钮类型：可以是submit, reset or button 　默认是 button

              //autoShow:true,  //默认false,自动显示

              // hidden:false,  //默认false，是否隐藏

               //hideMode:"offsets", //隐藏方式，默认display,可以取值：display，offsets，visibility

               //cls:"cssButton", //样式定义,默认""

               //disabled:false, //是否可用，默认false

              // disabledClass:"",  //默认x-item-disabled

               //enableToggle:true, //默认false

               //pressed:false, //设置按钮是否已经被按下，默认是false

               //html:"Ext",//默认""

              // handleMouseEvents:true, //默认true,如果为false,那么mouseout　mouseover就不能被触发

              //x:number,y:number,在容器中的x,y坐标

               handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');},//添加事件

               listeners:{//添加监听事件 可以结合handler测试这两个事件哪个最先执行
                  "click":function(){
                       Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');
                       //Ext.getCmp("buttonName").hide();//隐藏按钮
                  }
              },

               //cls:"x-btn-text-icon",//添加图标前需要设置该属性

               //icon:"house.gif", //图标的地址

               //plugins : Object/Array　扩展插件时使用

              // repeat:false,  //默认false ,如果为true,需要设置mouseover事件

               renderTo:Ext.getDom("hello") //将组件的显示效果渲染到某个节点的ID

        });

});

</script>
</head>
 
</head>
<body>
<div id="hello"></div>

</body>
</html>