`

登陆 (EXTJS2.0.2)

 
阅读更多

花了老子一天的时间，可见这东西有多麻烦啊。

不过对布局有了了解：在formPanel中的items中每一行为一个column,每一个column中又包含一个form布局的panel,

其中xtype : "textfield"不能设置为default，否则会显示不出textfield


Ext.onReady(function() {
	// 表单提交执行的方法
	function doSubmit() {
		if (Ext.getCmp("reg_form").getForm().isValid()) {
			Ext.getCmp("reg_form").getForm().submit({
				url : 'user/userLogin.action',
				method : 'POST',
				waitTitle : '登陆中',
				waitMsg : '正在处理您的请求,请稍候...',
				success : function(form, action) {
					//location.href="跳转页面";
				},
				failure : function(form, action) {
					try {
						if (action.result.message == "0") {
							Ext.MessageBox.alert('提示', "登陆失败!");
						}
					} catch (e) {
						Ext.MessageBox.alert('提示',
								'对不起，您无法连接系统，如果您的网络正常，请联系系统管理员!');
					}
				}
			});
		}
	}
	Ext.QuickTips.init(); // 为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。
	Ext.form.Field.prototype.msgTarget = 'side';// 默认的堤示在文本框的右侧
	var reg_form = new Ext.FormPanel({
		id : "reg_form",
		width : 331,
		height : 166,
		frame : true,
		buttonAlign : 'center',
		labelAlign : 'right',
		labelWidth : 70,
		// anchor : '95%',
		defaults : {
			allowBlank : false,// 不可为空
			blankText : "该输入项不能为空"
		// xtype : "textfield"//注意：使用column时不能设置此项，否则label显示不出来.
		},
		items : [{// 第一行
			layout : "column",
			items : [{
				columnWidth : 1,// 第一列
				layout : "form",
				items : [{
					xtype : "textfield",
					fieldLabel : '用户名',
					name : 'user.username',
					regex : /[\u4e00-\u9fa5]/,
					regexText : "只能输入中文!",
					width : 200
				}]
			}]
		}, {
			layout : "column",
			items : [{
				columnWidth : 1,
				layout : "form",
				items : [{
					xtype : "textfield",
					fieldLabel : '密码',
					inputType : "password",// 密码
					name : 'user.password',
					regex : /^[a-zA-Z0-9]{6,20}$/,
					regexText : "6-20位字母和数字组合!",
					width : 200
				}]
			}]
		}, {
			layout : "column",
			items : [{
				columnWidth : .55,
				layout : "form",
				items : [{
					xtype : "textfield",
					fieldLabel : '验证码',
					id : "validateCode",
					name : 'user.validateCode',
					allowBlank : false,
					blankText : "必填!且为四位数字!",
					regex : /^[0-9]{4}$/,
					regexText : "必填!且为四位数字!",
					width : 70
				}]

			}, {
				columnWidth : .45,
				layout : "fit",
				items : [{
					xtype : "label",
					html : "<a href='javascript:reloadcode();'><img id='validataImg' src='common/userImg.jsp' /></a>"
				}]

			}]
		}],
		buttons : [{
			text : '登录',
			handler : doSubmit
		}, {
			text : '重置',
			handler : function() {
				Ext.MessageBox.confirm('提示信息', '当前数据将不会保存,您确定要取消吗?', function(
						btn) {
					if (btn == "yes") {
						Ext.getCmp("reg_form").getForm().reset();
					}
				});
			}
		}],
		keys : [{
			key : Ext.EventObject.ENTER,
			fn : doSubmit,
			scope : this
		}]

	});

	var _window = new Ext.Window({
		title : "用户登陆",
		width : reg_form.width,
		height : reg_form.height,
		// bodyStyle : 'padding:5px 5px 0',
		layout : "fit",
		closable : false,// 关闭按钮
		resizable : true,// 调整大小
		collapsible : true,
		draggable : true,// 是否可拖动
		// maximizable : true,// 最大,还原
		// minimizable : true,// 最小化
		modal : false,
		border : false,// panel是否显示边框
		items : [reg_form]
	});
	_window.show();
});
function reloadcode() {
	Ext.getDom('validataImg').setAttribute("src",
			'common/userImg.jsp?' + Math.random());
}


form.jsp

	<head>
		<jsp:include page="common/extjshead.jsp"></jsp:include>
	</head>

	<body>
		out.println("{success : true,message : 'message'}");//流输出
		<br />
		< result name="input" type="json" >
		<br />
		<param name="includeProperties">success,message</param>
		<br />
		</result>
		<br />
		常用的Ext.form.Field.prototype.msgTarget有:under,qtip,side,title,
		<div id="formDiv"></div>
		<script type="text/javascript" src="appjs/form.js"></script>
	</body>

验证码的JSP ^_^:


<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,javax.imageio.*"%>
<%!   
  Color   getRandColor(int   fc,int   bc){//给定范围获得随机颜色   
                  Random   random   =   new   Random();   
                  if(fc>255)   fc=255;   
                  if(bc>255)   bc=255;   
                  int   r=fc+random.nextInt(bc-fc);   
                  int   g=fc+random.nextInt(bc-fc);   
                  int   b=fc+random.nextInt(bc-fc);   
                  return   new   Color(r,g,b);   
                  }   
  %><%   
  //设置页面不缓存   
  response.setHeader("Pragma","No-cache");   
  response.setHeader("Cache-Control","no-cache");   
  response.setDateHeader("Expires",   0);   
    
  //   在内存中创建图象   
  int   width=60,   height=20;   
  BufferedImage   image   =   new   BufferedImage(width,   height,   BufferedImage.TYPE_INT_RGB);   
    
  //   获取图形上下文   
  Graphics   g   =   image.getGraphics();   
    
  //生成随机类   
  Random   random   =   new   Random();   
    
  //   设定背景色   
  g.setColor(getRandColor(200,250));   
  g.fillRect(0,   0,   width,   height);   
    
  //设定字体   
  g.setFont(new   Font("Times   New   Roman",Font.PLAIN,18));   
    
  //画边框   
  //g.setColor(new   Color());   
  //g.drawRect(0,0,width-1,height-1);   
    
  //   随机产生155条干扰线，使图象中的认证码不易被其它程序探测到   
  g.setColor(getRandColor(160,200));   
  for   (int   i=0;i<155;i++){   
    int   x   =   random.nextInt(width);   
    int   y   =   random.nextInt(height);   
          int   xl   =   random.nextInt(12);   
          int   yl   =   random.nextInt(12);   
    g.drawLine(x,y,x+xl,y+yl);   
  }   
    
  //   取随机产生的认证码(4位数字)   
  String   sRand="";   
  for   (int   i=0;i<4;i++){   
          String   rand=String.valueOf(random.nextInt(10));   
          sRand+=rand;   
          //   将认证码显示到图象中   
          g.setColor(new   Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));   
  //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成   
          g.drawString(rand,13*i+6,16);   
  }   
    
  //   将认证码存入SESSION   
  session.setAttribute("userRand",sRand);   
    
  //   图象生效   
  g.dispose();   
    
  //   输出图象到页面   
  ImageIO.write(image,   "JPEG",   response.getOutputStream());   
  out.clear();
  out = pageContext.pushBody();
%>

<%!
//取得随机字符
String getRandomValue(Random random)
{
	String mask = "2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z";
	String[] masks = mask.split(",");
	return masks[random.nextInt(masks.length)];
}
%>


action或servlet返回的字符串为：{success:true,message:'helloworld!'}

当success为true时将走进doSubmit方法中的success，false将进入failsure方法。这里的success:function(){}并不是代表响应是否成功！


分享到：
| 进度条的简单使用(EXTJS2.0.2)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    信息提示小窗口Notification-ExtJS2.0.2(修正版)

    标题中的“信息提示小窗口Notification-ExtJS2.0.2(修正版)”指的是一个基于ExtJS 2.0.2框架的用户界面组件，它主要用于实现类似qwikiOffice中的右下角信息提示功能。这个组件是原版Notification的一个改进版本，...

    extjs2.0.2包

    ExtJS 2.0.2 是一个经典的JavaScript库，用于构建富互联网应用程序（RIA）。它提供了丰富的组件库、强大的数据绑定机制以及优雅的用户界面。这个包包含了完整的框架，包括所有必要的文件，使得开发者能够充分利用其...

    extjs2.0.2及eclipse插件spket

    在Eclipse中使用ExtJS 2.0.2，开发者需要先解压`ext-2.0.2.zip`文件，获取到其包含的所有库文件。这些文件通常会被引入到Web项目的JavaScript资源目录中，以便在页面中通过标签引用。同时，Eclipse中的Spket插件会...

    EXTJS 2.0.2

    EXT2.0,也就是EXTJS2.0是目前最新的技术产品,很强大的功能和完善、美观的界面，是JavaScript（JS）和JAVA用户开发WEB应用程序想要美化界面必需的插件，现打包完整，下载解压后在编写的代码中相应的调用就可以了！...

    基于extJs 2.0.2的LGPL协议开源设计源码

    本项目是一套基于ExtJs 2.0.2框架开发的开源设计源码，遵循LGPL（Lesser General Public License）开源协议。ExtJs 2.0.2是一个使用JavaScript编写的前端用户界面框架，广泛应用于开发富互联网应用（RIA）。LGPL协议...

    信息提示小窗口Notification-ExtJS2.0.2

    在给定的资料中，我们关注的是一个名为"信息提示小窗口Notification-ExtJS2.0.2"的项目，它是对ExtJS库的一个扩展，用于创建类似qwikiOffice中右下角的消息提示框。 首先，`ExtJS`是一个强大的JavaScript库，专为...

    extjs-2.0.2-demo-all

    ExtJs Demo100个演示Demo

    extjs2.0.2最后一版免费版，备份一下

    最后一版免费版，后面的都是要钱或要公开源码的了。

    ext-2.0.2包

    ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、...

    ext-2.0.2需要的资源

    EXTJS是一个基于JavaScript的用户界面库，用于构建富...随着技术的发展，后续版本的EXTJS（如EXTJS 4、5、6等）引入了更多的特性和改进，但EXTJS 2.0.2作为早期版本，仍然是了解EXTJS发展历程和基本概念的重要参考。

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架，它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    ExtJs2.0学习系列大全.rar

    ExtJs2.0学习系列大全 共15个word文档，大部分介绍都在里面了

    ExtJs 后台通用界面布局,左侧树，Center Tab 选项

    ExtJs 是一个强大的JavaScript 库，专用于构建富客户端应用程序，尤其在企业级后台系统中广泛应用。它提供了丰富的组件库和先进的布局管理机制，能够帮助开发者创建出功能丰富、交互性强的用户界面。本主题主要关注...

    常用Extjs工具:Extjs.util.Format使用方法

    Extjs是基于JavaScript的框架，它提供了一套完整的UI组件来构建Web应用程序。Extjs.util.Format是Extjs框架中用于格式化不同类型数据的工具集合，它包含了一系列静态方法来处理字符串、日期以及扩展函数操作。 首先...

    ext-2.0.2 （javascript脚本例子）

    EXTJS 2.0.2是该框架的一个特定迭代，尽管可能较旧，但仍然包含了许多实用的功能和示例。 当我们谈论"javascript脚本例子"时，这通常指的是EXTJS 2.0.2提供的示例代码。在下载的资源中，"examples"文件夹是核心部分...

    ext-2.0.2含localXHR.rar

    这个名为"ext-2.0.2含localXHR.rar"的压缩包包含了ExtJS 2.0.2版本的一个特定更新，主要涉及到本地数据交互和帮助文档的改进。在本文中，我们将深入探讨这些关键知识点。 首先，我们要了解ExtJS 2.0.2。这是一个较...

    extjs2.02帮助文档

    这个"extjs2.02帮助文档"提供了关于ExtJS 2.0.2版本的详尽指南，它是一个中文完整版，对于开发者来说是学习和理解这一版本ExtJS的重要资源。 在ExtJS 2.0.2中，主要包含了以下关键知识点： 1. **组件系统**：ExtJS...

    ext 2.0.2 源码 例子

    EXT 2.0.2是EXTJS的一个版本，它在2.0的基础上进行了优化和改进，提供了更多的功能和改进的性能。这个版本的EXTJS主要关注用户体验、组件的增强以及API的稳定性。 EXTJS的核心在于其强大的组件模型，这些组件包括...

    extjs 源代码码下载

    在EXTJS 2.0.2版本中，我们可以看到以下关键知识点： 1. **组件化编程**：EXTJS 采用组件化设计，将复杂的 UI 分解为可复用的部件，如表格（Grid）、表单（Form）、面板（Panel）等。每个组件都有自己的生命周期和...

    让我们开始EXTJS之旅EXTJS_WEB开发指南

    ExtJS-2.0.2.zip之后的文件目录结构。 ExtJS-2.0.2开发包中有8个文件子包与8个文件，下面 分别对这些资源进行简单介绍。 • adapter目录中放置的是ExtJS的核心代码与底层库 （如jquery和prototype）的适配器，ExtJS...

Magicbox
Global site tag (gtag.js) - Google Analytics