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); //直接使用实例