Extjs 事件监听
<!DOCTYPE html> <html> <head> <title>hello-extjs</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入extjs样式文件 --> <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" /> <!-- 引入extjs库文件,底层驱动 --> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <!-- 引入extjs-all --> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> --> <script type="text/javascript" src="event.js"></script> <script type="text/javascript"> </script> </head> <body> <div id="hello"></div> <a id="link1">普通链接1</a><br> <a id="link2">普通链接2</a><br> <a id="link3">普通链接3</a><br> <div id="btn1"></div><br> <div id="btn2"></div><br> </body> </html>
event.js
/** * */ function btnClick(btn,e){ var win = new Ext.Window({ title:"win_" + btn.text, width:300, height:200 }); win.on("beforeshow",function(){ return confirm("是否真要显示?"); }); win.show(); } Ext.onReady(function(){ Ext.get("link1").on("click",function(e){ //alert(e); //alert(e.constructor); //alert(e.preventDefault); alert("delay相当于setTimeout(),延迟执行"); },this,{delay:2000}); Ext.get("link2").on("click",function(e){ //alert(e); //alert(e.constructor); //alert(e.preventDefault); alert("single:true表示只能执行一次,执行一次后再点击没有反应"); },this,{single:true}); Ext.get("link3").on("click",function(e){ //alert(e); //alert(e.constructor); //alert(e.preventDefault); alert("buffer:500表示500ms内无论点击多少次只能执行一次"); },this,{buffer:500}); var btn1 = new Ext.Button({text:"我的按钮1"}); btn1.render("btn1"); btn1.on("click",btnClick); var btn2 = new Ext.Button({text:"我的按钮2",listeners: {
click : btnClick
}
});
btn2.render("btn2");
});