Ext.Button点击事件的三种写法

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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值