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

来源：互联网发布：流星网络电视安卓版vt 编辑：程序博客网时间：2024/04/29 18:16

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

阅读全文

0 0