无废话ExtJs 教程七[登陆窗体Demo：Login]

huiqinbo

浏览: 344632 次
性别:
来自: 北京

最近访客更多访客>>

薛宝钗的猫

iamjustlyl

A741841403

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

无废话ExtJs 系列教程

在这节我们通过前几节讲的内容做一个登陆页面，把前几节讲的内容贯穿一下。

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>
	<script type="text/javascript" src='study/button.js'></script>
	-->	
	<!--调用/study/login.js 实现登陆  -->
	<script type="text/javascript" src='study/login.js'></script>
	
	<style type="text/css">
		.loginicon
		{
			background-image: url(study/login.gif) !important;
		}
	</style>
	
  </head>  
  <body>
  <br>
  </body>
</html>

2. login.js代码如下：

Ext.onReady(function(){
	
	//初始化标签中的Ext:Qtip属性; 目的是当TextField的数据出错时，在其旁边进行警号!提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side';

	var submit = function(){
		//通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。
		if(form.getForm().isValid()){
			//Ext.MessageBox.alert('This is the submit button alert..');
			Ext.Msg.alert("Prompt", "login successfully!");
		}
	}
	
	var refresh = function(){
		//Ext.MessageBox.alert('This is the refresh button alert..');
		form.getForm().reset();
	}
	
	
	var form =  new Ext.FormPanel({
				//title:'Form',
				style:'margin:10px',
				//The width of labels in pixels
				labelWidth:59,
				bodyStyle:'padding:6px 0px 0px 15px',
				frame:true,
				//html:'This is the form part..',
				items:[
					//Username input
					new Ext.form.TextField({
						fieldLabel:'Username',
						width:140,
						height:23,
						allowBlank:false,
						blankText: 'Please type the username..'
					}),
					
					//Password input
					new Ext.form.TextField({
						fieldLabel:'Password',
						inputType:'password',
						width:140,
						height:23,
						allowBlank:false,
						blankText:'Please type the password..',
						maxLength:5,
						maxLengthText:'Please do not more than 4 character..'
					}),
					
					//CheckCode input
					new Ext.form.TextField({
						id: 'checkcode',
						fieldLabel:'Verification',
						width:76,
						allowBlank:false,
						blankText:'Please type the verificate code..',
						maxLength:4,
						maxLengthText:'Please do not more than 4 character..'
					})
				],
				buttonAlign:'center',
				//Button 
				buttons:[
					new Ext.Button({
						text:'Submit',
						handler:submit
					}),
					new Ext.Button({
						text:'Refresh',
						listeners:{mouseover:refresh}
					})
				]
		});
	
	//Window
	new Ext.Window({
		title:'Window',
		width:297,
		height:197,
		iconCls:'loginicon',
		//Plain is the window body transparent or lighter background.
		plain:true,
		//Resizable to determine whether the window size can be changed.
		resizable:false,
		//Shadow to determine whether the window have the shadow
		shadow:true,
		//Modal to determine whether the window is modal.
		modal:true,
		closable:false,
		maximizable:true,
		minimizable:true,
		items:form
	}).show();
	
	var checkcode = Ext.getDom('checkcode');
	var checkimage = Ext.get(checkcode.parentNode);
	checkimage.createChild({
		tag:'img',
		src:'study/checkcode.gif',
		align:'absbottom',
		style:'padding-left:18px;cursor:pointer;'
	});
});

说明1：

(1)88行，iconCls: 'loginicon':给窗体加上小图标，样式在第12行定义。
(2)Ext.getDom('checkcode')：根据ID获取Dom。
(3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。
(4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。
(5)form.getForm().isValid()：校验表单的验证项是否全部通过。
(6)form.getForm().reset()：重置表单。

3. 效果如下：