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

wenhuadream

2015-05-27

继上一节内容，我们在表单里加了个两个按钮“提交”与重置。如下所示代码区， buttons: [.........]。

1. index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>

	<!--ExtJs框架开始-->
	<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
	<!--ExtJs框架结束-->	
	<!-- 	 
	<script type="text/javascript" src="study/helloWorld.js"></script>
	<script type="text/javascript" src='study/window.js'></script>
	<script type="text/javascript" src='study/formPanel.js'></script>
	<script type="text/javascript" src='study/textField.js'></script>
	-->
	<!--调用/study/window.js 实现按钮：button组件  -->
	<script type="text/javascript" src='study/button.js'></script>
	
  </head>  
  <body>
  <br>
  </body>
</html>

2. button.js 代码如下:

Ext.onReady(function(){
	
	var btSubmit = function(){
		Ext.MessageBox.alert('提示','You should be close this button..');
	}
	
	var btRefresh = function(){
		Ext.MessageBox.alert('Refresh','This is the refresh window..');
	}

	//Window
	new Ext.Window({
		title:'window',
		width:477,
		height:377,
		html:'This is the window part..',
		items:[
			//Form
			new Ext.FormPanel({
				title:'formPanel',
				style:'margin:10px',
				html:'<div style="padding:10px">This is the form part..</div>',
				//if not this parameter, the formPanel will show the white..
				frame:true,			
				items:[
					//Username TextField
					new Ext.form.TextField({
						fieldLabel:'Username',
						width:140
						}),
					//Password TextField
					new Ext.form.TextField({
						fieldLabel:'Password',
						width:140,
						inputType:'password'
					})
				],
				buttons:[
					//Button → [submit], using the handler method to submit the event..
					new Ext.Button({
						text:'Submit',
						handler:btSubmit
					}),
					
					//Button → [refresh], using the mouseover method to touch off event..
					new Ext.Button({
						text:'Refresh',
						listeners:{'mouseover':btRefresh}
					})
				]
		})]		
	}).show();
});

说明1：

(1)var btnsubmit = new Ext.Button():创建一个新的Button按钮对象。
(2)handler: btnsubmitclick：当用户点击的时候[即js中的onclick事件]执行方法btnsubmitclick。
(3)listeners: {'mouseover': btnresetmouseover,'click': btnresetclick}：当用户点击的时候[即js中的onclick事件]执行方法btnresetclick，
    鼠标悬停时执行方法btnresetmouseover。
(4)handler与listeners的区别：
    handler:执行的是首发事件，click是button这个组件的首发事件。这就是handler的运行方式：被某个组件的首要event所触发。
            handler是一个特殊的listener。
    listener：是一个事件名 + 处理函数的组合，事件监听，如上例代码所示，我们监听了两个事件"click"，与"mouseover"事件，并且会顺序执行。

说明2：

button组件常用的：属性、方法及事件

一、属性

text:字符串，显示在按钮上的文字。

minWidth: 整型，最小宽度。

二、事件

handler:首发方法处理事件。

listeners:事件监听。

3. 效果如下：

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