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

转自：http://maidini.blog.163.com/blog/static/377627042008111061844345/

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>

 

==========================================================

下列为我自己的试验代码：

    var buttonclick = function() {
        //Ext.MessageBox.alert("提示", "是否保存？")
        //Ext.MessageBox.confirm("提示", "是否保存更改的数据？");
        Ext.MessageBox.show({ title: "提示", msg: "是否保存更改的数据？", icon: Ext.MessageBox.QUESTION, buttons: { "yes": "是", "no": "否", "cancel": "取 消" }, closable: true, progress: true });
    }

    var button = new Ext.Button({ name: "mybutton", text: "添加", handler: buttonclick });　//定义的同时通过handler方式指定事件　
    button.render("mypanel"); //指定显示区域，mypanel是html页中的div
    //Ext.select('mybutton').on('click', onclick);  //无效
    //Ext.get('mypanel').on('click', buttonclick);  //通过所在区域获取
    //button.on('click', buttonclick);  //直接使用实例