EXT按钮事件

晨曦之光 发布于 2012/03/09 14:48
阅读 4K+
收藏 0

MySQL连接为什么挂死了?别踩坑!>>>

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


 
注意: handler注释才会listeners,不然只会handler
 

ETX系列:

EXT基础

EXT表单

EXT表格

EXT事件

EXT窗口

EXT按钮事件


原文链接:http://blog.csdn.net/21aspnet/article/details/6865571
加载中
返回顶部
顶部