ExtJs+ Dwr 页面登入功能

最新推荐文章于 2013-06-02 16:58:00 发布

haohaohao520

最新推荐文章于 2013-06-02 16:58:00 发布

阅读量236

点赞数

分类专栏： ExtJs 文章标签： DWR EXT JavaScript Servlet CSS ViewUI

ExtJs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ExtJS和DWR实现一个简单的登录功能。通过整合这两种技术，可以构建出具备前后端交互能力的登录表单。文中详细展示了配置文件、登录页面及服务端验证等关键代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近正在学习extjs 和 dwr ，自己做了一个extjs结合dwr的登入功能，拿出来跟大家分享一下。本人第一次发帖，请各位大侠多多指教。

1.开发工具Myeclipse6.0+ExtJs2.0+dwr(忘了是那个版本，好像还是1.x的)

2.新建一个web project ，将dwr.jar包放到WEB-INF下的lib下配置dwr.xml 和 web.xml

dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
	<allow>
		<create javascript="LoginService" creator="new">
		    <param name="class" value="com.c35.service.LoginService"></param>
		</create>
	</allow>
	<signatures>
	  <![CDATA[	  
	  ]]>
	</signatures>
</dwr>

web.xml

	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>/login/login.jsp</welcome-file>
	</welcome-file-list>

由于时间有限只贴关键代码：

<link rel = "stylesheet" type = "text/css" href="/ExtJsDemo/scripts/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="/ExtJsDemo/scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ExtJsDemo/scripts/ext/ext-all.js"></script>
    <script type="text/javascript" src="/ExtJsDemo/scripts/js/login.js"></script>
    
    <script type="text/javascript" src="/ExtJsDemo/dwr/engine.js"></script>
	<script type="text/javascript" src="/ExtJsDemo/dwr/util.js"></script>
	<script type="text/javascript" src="/ExtJsDemo/dwr/interface/LoginService.js"></script>

<body style='background:#dfe8f6;'>
 
    <div id="show" style="position:absolute;top:5%;left:18%;padding:150px;text-align:'left';"></div>
    
  </body>

Ext.onReady(function() {
	Ext.QuickTips.init();//开启表单提示,支持tips提示
	Ext.form.Field.prototype.msgTarget = 'side';//设置提示信息位置为边上,提示的方式，枚举值为"qtip","title","under","side",id(元素id)
	var simple = new Ext.FormPanel({//初始化表单面板
		renderTo:'show', ////填充到指定区域		
		labelWidth : 75, // 默认标签宽度
		labelAlign: 'right' ,//标签对齐
		frame : true,//设置表单面板，false为无面板,圆角和浅蓝色背景
		title : '登入表框名称',
		bodyStyle : 'padding:10px 10px 0',//表单样式
		width : 350,//表单宽度
		height: 180,//表单高度
		monitorValid:true,//绑定验证
		defaults : {
			width : 230, //文本宽长度 简化items中相同的属性
			xtype:"textfield"
		},
		//defaultType : 'textfield',//默认字段类型
		submit: function(){
                   // this.getEl().dom.action = '/ExtJsDemo/index.jsp',
                   // this.getEl().dom.method='post',              
                   // this.getEl().dom.submit();
			       var type = Ext.getCmp('type').getValue() ;
			       var name=Ext.getCmp('name').getValue();
			       var password = Ext.getCmp('pws').getValue() ;
			       LoginService.isUsrExist(name,password,function(tmp){
			           if(tmp){
			           	  window.location.href = "/ExtJsDemo/index.jsp" ;
			           }else{
			           	  Ext.Msg.alert("信息提示","登入信息有误请重新输入！") ;
			           }
			       })
              },
		items : [{
			xtype:"combo",
            store: store,
            fieldLabel : '用户权限' ,
            id:'type',
            name:'type' ,
            displayField:'id',
            valueField : 'name' ,
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'请选择',
            anchor:"90%"
		},{
			fieldLabel : '帐  户',
			name : 'username',
			id:'name',
			anchor:"90%",//350px-labelWidth剩下的宽度的95%，留下5%作为后面提到的验证错误提示
			//width : 230,
			//xtype:"textfield",
			allowBlank : false,//false则不能为空，默认为true
			blankText : '帐户不能为空'
		}, {
			fieldLabel : '密  码',
			name : 'pws',
			id:'pws',
			inputType: 'password', 
			anchor:"90%",
			//width : 230,
			allowBlank : false,//禁止为空
			blankText : '密码不能为空'//可限制多种类型，具体参照api文档
		}],
		buttons : [{
			text : '登录',
			formBind : true,//.如果你想绑定验证，在form表单添加参数monitorValid:true,然后在按钮配置参数中添加formBind：true
			handler : function() {
				if(simple.form.isValid()){
					simple.form.submit(); 
				}
				
			}//提交表单与服务器交互的实例请参照实例分析部分《一个完整的登录实例》
		}, {
			text : '取消',
			handler : function() {
				simple.form.reset();
			}//重置表单
		}]
	});
	//simple.render('show');//填充到指定区域
});

var store = new Ext.data.SimpleStore({
        fields: ['id', 'name'],
        data : [['管理员', '1'],
        ['财务员', '0']
       ] // from states.js
    });

LoginService.java

import javax.servlet.http.HttpSession;

/**
 *
 * @author yusam(yusam@163.com)
 * @version Revision: 1.00 Date: 2008-9-4
 */
public class LoginService {

	public boolean isUsrExist(String name,String pwd,HttpSession session){
        boolean flag = false ;
        if("yusam".equals(name) && "123".equals("123")){
        	flag = true ;
        	session.setAttribute("username", name) ;
        	session.setAttribute("pwd", pwd) ;
        }
		return flag;
	}
}