ExtJS3.0之Form组件——Button

1、Ext.Button

　　Button的创建new Ext.Button({...});，在HTML中Button有三种类型：submit、reset、button,在ExtJS是相同的，下面来看看ExtJS三种绑定事件的方法，例子代码如下：

 /// 
 
第一种handler：
//document.body == Ext.getBody().dom
Ext.onReady(function(){
    new Ext.Button({
        renderTo:Ext.getBody(),//属性renderTo：将当前对象所生成的HTML对象存放到指定的对象中
        text:"确 定",
        handler:function(){    //函数handler：指定一个函数句柄，默认触发click事件
            Ext.Msg.alert("提示","欢迎学习ExtJS。");
//            alert("欢迎学习ExtJS。");
        }
    });
});
第二种listeners：
Ext.onReady(function(){
    new Ext.Button({
        renderTo:Ext.getBody(),
        text:"确 定",
        listeners:{  //函数listeners：在对象初始化之前就将一系列事件进行定义
            "click":function(){
                Ext.Msg.alert("提示","欢迎学习ExtJS。");
            }
        }
    });
});
第三种on：
Ext.onReady(function(){
    var _btn = new Ext.Button({
        renderTo:Ext.getBody(),
        text:"确 定"
    });
    _btn.on("click",function(){
        Ext.Msg.alert("提示","欢迎学习ExtJS。");
    });
});
 
 

　　上述三种代码执行效果是相同的，推荐使用第二种，它是初始化时绑定监听事件，需要说明一点：上述中的Ext.getBody()是Extjs获取当前document的方法，它等同于document.body == Ext.getBody().dom，执行上面的代码，点击页面生成的Button如下图所示：