EXT JS點滴（3）EXT JS 事件機制

在這一節中，我將通過一些實例來跟大家討論一下，EXT JS中事件的處理方式

第一個事件例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS點滴（3）事件處理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件處理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件處理例子1</p>" }); win.show(); } Ext.onReady( function(){ Ext.select("div:odd").addClass("red"); Ext.select("div:odd").on("click",openWin);//監聽奇數行Div的click事件 } ); </script> <body> <div >第1個DIV</div> <div >第2個DIV</div> <div >第3個DIV</div> <div >第4個DIV</div> </body> </html>

運行結果如下：

第二個事件處理例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS點滴（3）事件處理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件處理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件處理例子2</p>" }); win.show(); } Ext.onReady( function(){ Ext.get("evtBtn").on("click",openWin);//監聽按鈕的click事件 } ); </script> <body> <input type="button" id="evtBtn" value="點我，嚇死你"/> </body> </html>

運行效果如下：

第三個事件處理例子（延時執行事件）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>EXT JS點滴（3）事件處理</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <style> .red{ background:#F00; } </style> </head> <script> function openWin() { var win=new Ext.Window({ title:"事件處理", height:200, width:300, maximizable:true, bodyStyle:{padding:"5px"}, html:"<p>事件處理例子3</p>" }); win.show(); } Ext.onReady( function(){ Ext.get("evtBtn").on("click",openWin);//監聽按鈕的click事件 Ext.get("evtBtn").on("click",openWin,this,{delay:5000});//延遲執行事件 } ); </script> <body> <input type="button" id="evtBtn" value="點我，嚇死你"/> </body> </html>

執行5秒後，用鼠標移開，會看到兩個窗口。結果如下：

EXT JS點滴（3）EXT JS 事件機制

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

jQuery插件開發模式（一)

EXT JS點滴（1）引入有用的EXT JS內容文件

深表歉意

奇偶文件重新命名

PHP中$GLOBALS['HTTP_RAW_POST_DATA'] 和 $_POST

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結