Ext.Button点击事件的三种写法及比较_new ext.button 点击时改变text-优快云博客

ExtJs的写法太灵活了，现在收集了关于Button点击事件的三种写法。今天做一个记录，以后备查。
首先创建一个JS文件写入以下代码：
1.点击默认为handler
Ext.onReady(function(){

            new Ext.Button({
                text:"确定",
                //将BUTTON画在BODY中
                renderTo:Ext.getBody(),
                //BUTTON的宽度
                minWidth:100,
                id:"mybutton"
                //点击事件
                handler:function(){
                    Ext.MessageBox.show({
                        title: '提示' ,
                        msg: '你点击了我！' ,
                        buttons: Ext.MessageBox.OK ,
                        fn: function(){} ,
                        icon: Ext.MessageBox.INFO
                    });
                }
        });
});

2.添加监听方法，监听click事件。注意listeners不要少s
Ext.onReady(function(){

            new Ext.Button({
                text:"确定"
                //将BUTTON画在BODY中
                renderTo:Ext.getBody(),
                //BUTTON的宽度
                minWidth:100,
                id:"mybutton",
                //点击事件
                listeners:{
                    "click":function(){
                        Ext.MessageBox.show({
                            title: '提示' ,
                            msg: '你点击了我！' ,
                            buttons: Ext.MessageBox.OK ,
                            fn: function(){} ,
                            icon: Ext.MessageBox.INFO
                        });
                    }
                }
        });
});

3.如果自己开发了多个组件，需要交互，可能要将事件写在外面达到松耦合的目的。
JS中的代码如下：
Ext.onReady(function(){

            new Ext.Button({
                text:"确定"
                //将BUTTON画在BODY中
                renderTo:Ext.getBody(),
                //BUTTON的宽度
                minWidth:100,
                id:"mybutton"
        });
});

网页代码中如下：
<script type="text/javascript">

    Ext.onReady(function(){
        //获得组件
        var btn = Ext.getCmp("mybutton");
        //绑定点击事件
        btn.on("click" , function(){
                        Ext.MessageBox.show({
                            title: '提示' ,
                            msg: '你点击了我！' ,
                            buttons: Ext.MessageBox.OK ,
                            fn: function(){} ,
                            icon: Ext.MessageBox.INFO
                        });
                    });
    });

</script>

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生效。