无废话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:事件监听。
无废话ExtJs 入门教程六[按钮：Button]的更多相关文章
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程七[登陆窗体Demo：Login]
无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...
- 无废话ExtJs 入门教程三[窗体：Window组件]
无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
随机推荐
- 网页的title左边的小图片怎么添加
首先,代码中的title标签里是不能加图片的.但是浏览器标提栏前面是可以加一个小图标的. 解决方案:第一步,做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透 ...
- php foreach循环中unset后续的键值问题
实例: $arr=array('a','b','c','d','e','f'); foreach($arr as $index=>$tmp){ echo $index.'=>'.$tmp. ...
- iOS self = [super init]
self = [super init] 这个问题一直不太明白,今天研究了一下,在stackoverflow找到了下面的答案: http://stackoverflow.com/questions/29 ...
- CentOS搭建svn服务器支持https访问
在CentOS6.3 64位机器上配置SVN服务器,并设置只允许HTTPS连接,可以配置多个repos源,每个源都拥有自己的组和成员,用于权限控制. 安装相关软件 Apache yum install ...
- MySQL 获得当前日期时间\时间戳 函数 （ 转自传智播客）
MySQL 获得当前日期时间 函数 1.1 获得当前日期+时间(date + time)函数:now() mysql> select now(); +-------+ | now() | +-- ...
- NEFU 84 五指山 (扩展欧几里得)
五指山 Problem:84 Time Limit:1000ms Memory Limit:65536K Description 西游记中孙吾空大闹天宫,如来佛祖前来降伏他,说道:"我与你打 ...
- 把Tomcat做成系统服务自动启动
用Tomcat的bin目录下的service.bat,cmd,命令:进入到Tomcat的bin目录 service.bat install可以把tomcat做成系统服务;修改下计算机管理里面的服务,找 ...
- iOS -类目，延展，协议
1.类目 类目就是为已存在的类添加新的方法.但是不能添加实例变量.比如系统的类,我们看不到他的.m文件,所以没有办法用直接添加方法的方式去实现. @interface NSMutableArray ( ...
- .NET微信公众号开发-3.0查询自定义菜单
一.前言 前面我们已经创建好了我们的自定义菜单.那么我们现在要如何查询我们自定义的菜单.原理都是一样的,而且都是相当简单,只是接口地址文档换掉了. 2.0开始编码 同样我们首先创建好我的查询页面,在这 ...
- Java代码简化神器-Lombok
一.背景 前段时间在开源社区中发现了一个比较牛逼的简化Java代码的神器-Lombok,接着自己写了demo进行测试和练习,感觉真的很不错,特此分享给需要的小伙伴们~ 二.开发之前的准备 1.lomb ...