无废话ExtJs 入门教程六[按钮：Button]

时间：2016-06-14 14:09:28 阅读：227 评论：0 收藏：0 [点我收藏+]

标签：

无废话ExtJs 入门教程六[按钮：Button]

extjs技术交流，欢迎加群（201926085)

继上一节内容，我们在表单里加了个两个按钮“提交”与重置。如下所示代码区的第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.效果如下：

技术分享