无废话ExtJs 入门教程六[按钮：Button]
继上一节内容，我们在表单里加了个两个按钮“提交”与重置。如下所示代码区的第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:事件监听。
