在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下。
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. 效果如下: