朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
繼上一節內容，我們在表單里加了個兩個按鈕“提交”與重置。如下所示代碼區的第68行位置， buttons: [btnsubmit, btnreset]。
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架開始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 9 <!--ExtJs框架結束--> 10 <script type="text/javascript"> 11 Ext.onReady(function () { 12 //初始化標簽中的Ext:Qtip屬性。 13 Ext.QuickTips.init(); 14 Ext.form.Field.prototype.msgTarget = 'side'; 15 //提交按鈕處理方法 16 var btnsubmitclick = function () { 17 Ext.MessageBox.alert('提示', '你點了確定按鈕!'); 18 } 19 //重置按鈕"點擊時"處理方法 20 var btnresetclick = function () { 21 Ext.MessageBox.alert('提示', '你點了重置按鈕!'); 22 } 23 //重置按鈕"鼠標懸停"處理方法 24 var btnresetmouseover = function () { 25 Ext.MessageBox.alert('提示', '你鼠標懸停在重置按鈕之上!'); 26 } 27 //提交按鈕 28 var btnsubmit = new Ext.Button({ 29 text: '提交', 30 handler: btnsubmitclick 31 }); 32 //重置按鈕 33 var btnreset = new Ext.Button({ 34 text: '重置', 35 listeners: { 36 'mouseover': btnresetmouseover, 37 'click': btnresetclick 38 } 39 }); 40 //用戶名input 41 var txtusername = new Ext.form.TextField({ 42 width: 140, 43 allowBlank: false, 44 maxLength: 20, 45 name: 'username', 46 fieldLabel: '用戶名稱', 47 blankText: '請輸入用戶名', 48 maxLengthText: '用戶名不能超過20個字符' 49 }); 50 //密碼input 51 var txtpassword = new Ext.form.TextField({ 52 width: 140, 53 allowBlank: false, 54 maxLength: 20, 55 inputType: 'password', 56 name: 'password', 57 fieldLabel: '密碼', 58 blankText: '請輸入密碼', 59 maxLengthText: '密碼不能超過20個字符' 60 }); 61 //表單 62 var form = new Ext.form.FormPanel({ 63 frame: true, 64 title: '表單標題', 65 style: 'margin:10px', 66 html: '<div style="padding:10px">這里表單內容</div>', 67 items: [txtusername, txtpassword], 68 buttons: [btnsubmit, btnreset] 69 }); 70 //窗體 71 var win = new Ext.Window({ 72 title: '窗口', 73 width: 476, 74 height: 374, 75 html: '<div>這里是窗體內容</div>', 76 resizable: true, 77 modal: true, 78 closable: true, 79 maximizable: true, 80 minimizable: true, 81 buttonAlign: 'center', 82 items: form 83 }); 84 win.show(); 85 }); 86 </script> 87 </head> 88 <body> 89 <!-- 90 說明： 91 (1)var btnsubmit = new Ext.Button():創建一個新的Button按鈕對象。 92 (2)handler: btnsubmitclick：當用戶點擊的時候[即js中的onclick事件]執行方法btnsubmitclick。 93 (3)listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}：當用戶點擊的時候[即js中的onclick事件]執行方法btnresetclick， 94 鼠標懸停時執行方法btnresetmouseover。 95 (4)handler與listeners的區別： 96 handler:執行的是首發事件，click是button這個組件的首發事件。這就是handler的運行方式：被某個組件的首要event所觸發。 97 handler是一個特殊的listener。 98 listener：是一個事件名 + 處理函數的組合，事件監聽，如上例代碼所示，我們監聽了兩個事件"click"，與"mouseover"事件，並且會順序執行。 99 --> 100 </body> 101 </html>
2.效果如下：
3.button組件常用的：屬性、方法及事件
一、屬性
text:字符串，顯示在按鈕上的文字。
minWidth: 整型，最小寬度。
二、事件
handler:首發方法處理事件。
listeners:事件監聽。