从零开始学习ExtJs6系列教程三【登录Demo：Login】
在这节我们通过前几节讲的内容做一个登陆页面.
login.js
Ext.onReady(function() {
// 初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// 提交按钮处理方法
var btnsubmitclick = function() {
if (form.getForm().isValid()) {
// 通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
Ext.Msg.alert("提示", "登陆成功!");
}
}
// 重置按钮"点击时"处理方法
var btnresetclick = function() {
form.getForm().reset();
}
// 提交按钮
var btnsubmit = new Ext.Button({
text : '提 交',
handler : btnsubmitclick
});
// 重置按钮
var btnreset = new Ext.Button({
text : '重 置',
handler : btnresetclick
});
// 用户名input
var txtusername = new Ext.form.TextField({
width : 140,
allowBlank : false,
maxLength : 20,
name : 'username',
fieldLabel : '用户名',
blankText : '请输入用户名',
maxLengthText : '用户名不能超过20个字符'
});
// 密码input
var txtpassword = new Ext.form.TextField({
width : 140,
allowBlank : false,
maxLength : 20,
inputType : 'password',
name : 'password',
fieldLabel : '密 码',
blankText : '请输入密码',
maxLengthText : '密码不能超过20个字符'
});
// 验证码input
var txtcheckcode = new Ext.form.TextField({
fieldLabel : '验证码',
id : 'checkcode',
allowBlank : false,
width : 76,
blankText : '请输入验证码！',
maxLength : 4,
maxLengthText : '验证码不能超过4个字符!'
});
// 表单
var form = new Ext.form.FormPanel({
url : '******',
labelAlign : 'right',
labelWidth : 45,
frame : true,
cls : 'loginform',
buttonAlign : 'center',
bodyStyle : 'padding:6px 0px 0px 15px',
items : [ txtusername, txtpassword, txtcheckcode ],
buttons : [ btnsubmit, btnreset ]
});
// 窗体
var win = new Ext.Window({
title : '用户登陆',
iconCls : 'loginicon',
plain : true,
width : 276,
height : 174,
resizable : false,
shadow : true,
modal : true,
closable : false,
animCollapse : true,
items : form
});
win.show();
// 创建验证码
var checkcode = Ext.getDom('checkcode');
var checkimage = Ext.get(checkcode.parentNode);
checkimage.createChild({
tag : 'img',
src : 'xxxxxx',
align : 'absbottom',
style : 'padding-left:23px;cursor:pointer;'
});
});login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<title>登录title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="<%=basePath %>static/ext-6.0.0.415/build/classic/theme-neptune/resources/theme-neptune-all.css">
<script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/ext-bootstrap.js">script>
<script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/ext-all.js">script>
<script type="text/javascript" src="<%=basePath %>static/ext-6.0.0.415/build/classic/locale/locale-zh_CN.js">script>
<script type="text/javascript" src="<%=basePath %>static/js/login.js">script>
head>
<body>
body>
html>表单：FormPanel 说明：
(1)var form = new Ext.form.FormPanel({}):创建一个新的form表单对象。
(2)title: ‘表单标题’：表单的标题，如果不加的话，不会出现上面的浅色表单标题栏。
(3)style: ‘margin:10px’:表单的样式，加了个外10px的外边距。
(4)html: ‘
form 组件常用的：属性、方法及事件
一、属性
width:整型，表单宽度。
height:整型，表单高度。
url:字符串，表单提交地址。
二、方法
reset:表单重置。
isValid:表单是否验证全部通过。
submit:表单提交。
文本框：TextField 说明：
(1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
(2)Ext.form.Field.prototype.msgTarget = ‘side’：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为”qtip”,”title”,”under”,”side”,id(元素id)，side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
(3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
(4)allowBlank: false：不允许文本框为空。
(5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
(6)name: ‘password’：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
(7)fieldLabel: ‘用户名’：文本框前面显示的文字标题，如“用户名”，“密码”等。
(8)blankText: ‘请输入用户名’：当非空校验没有通过时的提示信息。
(9) maxLengthText: ‘用户不能超过20个字符’：当最大长度校验没有通过时的提示信息。
textfield组件常用的：属性、方法及事件
一、属性
allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息
按钮：Button 说明：
(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”事件，并且会顺序执行。
button组件常用的：属性、方法及事件
一、属性
text:字符串，显示在按钮上的文字。
minWidth: 整型，最小宽度。
二、事件
handler:首发方法处理事件。
listeners:事件监听。