`
daijun74
  • 浏览: 48907 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Ext FormPanel和Struts2实现登陆界面

    博客分类:
  • J2ee
阅读更多

今天弄了一天,一直在弄Ext中的FormPanel和Struts2的整合

练习的内容是想用Ext的FormPanel来做一个登陆界面,验证用户合法性。使用FormPanel自己的submit来提交用户信息并验证,可是按照网上几乎没有较全的例子,这也只能怪自己Ext Ajax的基础太差,很多东西都不了解。最后东拼西凑总算弄明白了如何才能正确的执行FormPanel的submit的回调函数。submit提交后,必须从后台接收Json数据并且Json数据要满足一定格式:有一个success属性,值必须是true 或者 false凭借这个字段来判断提交成功或失败从而调用success回调函数或者failure回调函数;另一个是result属性,里面包含了自己需要传到前台来的数据,可以直接访问

好,说到这里,对于如何提交并接收服务端返回的数据已经有所了解。此时问题来了,这个练习采用的是Struts2来接收请求,要返回Json数据的例子以前还真没有碰到过,Google了半天总算明白了,Ext和Struts2之间的这种请求与返回需要一个jsonPlugin的插件支持,才能返回json数据。

不多废话,直接贴代码,自己做个经验教训也希望能够帮助到和我一样的新手

 

js端我采用Ext.Window嵌套FormPanel的做法

 

var fp;
Ext.onReady( function() {
    Ext.QuickTips.init();

    function checkOK(form, action) {
    	window.location.href = action.result.result;
    }
    
    function checkError(form, action) {
    	Ext.Msg.show({
            title: '错误',
            msg: action.result.result,
            buttons: Ext.Msg.OK,
            icon: Ext.MessageBox.ERROR
        });
    }
    
    fp = new Ext.form.FormPanel( {
    	bodyStyle: 'padding: 15px 40px 15px 40px; background-color: #efefff;',
    	labelAlign: 'right',
    	labelWidth: 80,
    	items: [
    	    {
    	    	fieldLabel: '用户名',
    	    	xtype: 'textfield',
    	    	width: 200,
    	    	id: 'userId',
    	    	name: 'userId',
    	    	allowBlank: false,
    	    	blankText: '请输入用户名'
    	    }, {
    	    	fieldLabel: '密码',
    	    	xtype: 'textfield',
    	    	width: 200,
    	    	id: 'password',
    	    	name: 'password',
    	    	inputType: 'password',
    	    	allowBlank: false,
    	    	blankText: '请输入密码'
    	    }
    	]
    });
    
    var w = new Ext.Window({
    	title: 'Welcome',
        iconCls: 'i-script',
        closable: false,
        resizable: false,
        modal: true,
        shadow: true,
        layout: 'fit',
        width: 400,
        height: 150,
        border: false,
        plain: true,
        items: [fp],
    	buttonAlign: 'center',
    	buttons: [{
			text: '登陆',
			type: 'submit',
			handler: function () {
				var f = fp.getForm();
				if (f.isValid()) {
					f.submit({
						url: 'login.action',
						method: 'POST',
						waitMsg: '用户信息验证中...请稍后...',
						success: checkOK,
						failure: checkError,
						scope: this
					});
				} else {
					if (!checkInput("userId")) {
						Ext.Msg.show({
				            title: '错误',
				            msg: '请输入用户名',
				            buttons: Ext.Msg.OK,
				            icon: Ext.MessageBox.ERROR
				        });
					} else if (!checkInput("password")) {
						Ext.Msg.show({
				            title: '错误',
				            msg: '请输入密码',
				            buttons: Ext.Msg.OK,
				            icon: Ext.MessageBox.ERROR
				        });
					}
				}
			}
		}]
    });
    w.show();
});

 

struts的配置文件中需要有几点需要注意,对于这个,网上倒是说的比较清楚

1、需要继承json-default

<package name="ZZCMIS" namespace="/" extends="json-default">

2、声明编码方式utf-8,因为json传输数据需要用utf-8编码方式

	<constant name="struts.i18n.encoding" value="UTF-8"/>

3、Ext中FormPanel提交的action请求的配置,使用了jsonPlugin才可以定义json的返回类型,并且可以定义一些参数,例如includeProperties表明json只返回以下的属性,其余定义在action中的属性并不作为json数据返回客户端;相应的excludeProperties表明除了以下的属性,其余定义在action中的属性都作为json数据返回客户端;另外还有类似root等参数可以配置,具体可以参照 http://cwiki.apache.org/WW/json-plugin.html

在我的例子中,我只需要返回success的boolean型变量和result字符串即可

<action name="login" class="loginAction" method="execute">
	<result type="json">
                <param name="includeProperties">success,result</param>
	</result>
</action>

4、后台action中具体的业务逻辑并不重要,只要把你想返回的字段设置正确即可,并同时提供get set方法

result = "main.action";
success = true;
return SUCCESS;

 

如果有错,欢迎大家拍砖,希望可以帮到有需要的朋友

 

struts中的action配置在spring中,就不贴出来

 

其实做完以后,我在想何必这么麻烦呢,本来在项目里我已经集成了dwr,完全可以不通过FormPanel自己的submit来做验证,使用dwr即可,哎~

分享到:
评论

相关推荐

    ext4.1登陆界面

    2. **表单(FormPanel)**:登录界面的核心是一个表单,用于收集用户输入。EXTJS4的FormPanel提供了一种组织表单元素的方式,可以添加验证规则,并能方便地与服务器通信以提交数据。 3. **数据绑定(Data Binding)...

    struts2+extjs3 单/多文件上传

    本文将深入探讨如何使用Struts2和ExtJS3实现单文件和多文件的上传功能。 首先,我们要理解文件上传的基本流程。在Web应用中,用户通过浏览器选择本地文件,然后这些文件的数据被封装到HTTP请求中发送到服务器。...

    struts2.1.6 EXT

    在实际开发过程中,开发者需要理解每个框架的核心概念和用法,例如Struts2的Action和Result,EXT的GridPanel和FormPanel,Spring的Bean配置和AOP注解,Hibernate的实体类和映射文件,JPA的实体和查询,以及EJB的...

    extjs3.2+struts2实现多文件上传excel并插入到数据库

    本项目“extjs3.2+struts2实现多文件上传excel并插入到数据库”是针对这一需求的具体解决方案,利用了ExtJS 3.2前端框架和Struts2后端框架进行开发。 **ExtJS 3.2** 是一个基于JavaScript的富客户端应用框架,提供...

    Ext table布局实例 formpanel的table布局

    Ext的formpanel table布局实例,有效解决了页面resize时列宽不跟随改变的问题,即列宽的自适应宽度

    struts+extjs实现UploadDialog

    在"struts+extjs实现UploadDialog"这个主题中,我们主要讨论如何利用Struts和ExtJS来创建一个文件上传对话框。UploadDialog通常是一个交互式的用户界面,允许用户选择本地文件并将其上传到服务器。 首先,让我们从...

    自我扩展FormPanel 和Store

    本文将深入探讨如何实现自我扩展的FormPanel和Store,以及它们如何实现自动数据触发感知功能和与Store的绑定。 首先,让我们理解FormPanel和Store的基本概念。FormPanel是一个用于创建表单的组件,它提供了丰富的...

    Ext相册实现文件拖拽,实时上传进度,本地预览

    总结,实现"Ext相册实现文件拖拽,实时上传进度,本地预览"的功能,需要结合EXT4的前端组件能力、HTML5的File API和Drag and Drop API,以及Servlet或Struts2在后端进行文件处理。这样的组合不仅提升了用户体验,也...

    Ext 添加功能form表单实例

    在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    Ext.Net界面源码C# ASPX

    2. **数据绑定**:可能会涉及到如何将后端数据源(如数据库)与Ext.NET控件绑定,实现数据的动态加载和更新。 3. **事件处理**:展示如何处理Ext.NET控件的客户端事件,如按钮点击、行选择等,并在C#后台进行响应。...

    ext2.2中文帮助文档

    EXT2.2与Java的整合通常通过Spring MVC、Struts2等框架实现,通过JSON或XML进行数据交互。开发者可以利用EXT2.2创建前端界面,然后通过HTTP请求与Java后端进行通信。 **CHM文件** "Ext2.2API中文版(最终完成版)....

    ext几个实例

    在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例,包括与MySQL数据库的交互。 **1. Ext....

    extjs和struts的技术结合

    结合以上内容,开发者可以通过ExtJS创建富客户端界面,利用Struts处理业务逻辑和控制流程,形成前后端分离的开发模式,提高应用的可维护性和用户体验。在实际开发中,需要理解并熟练掌握两者的核心概念和使用技巧,...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    在EXTJS框架中,`Ext.FormPanel`和`Ext.Ajax.request`提供了两种不同的异步提交方法,它们各自有其特点和适用场景。下面我们将详细探讨这两种方式的区别。 1. **Ext.FormPanel的异步提交** `Ext.FormPanel` 是...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    "Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2",是针对Ext JS 2.2框架的重要参考资料,对于开发者来说尤其有价值,特别是那些中文为母语的开发者,它使得理解框架的功能和用法更加方便。...

    Extjs+Struts2系统后台管理框架

    这种组合允许前端利用ExtJS的强大界面组件来提供美观、交互性强的用户界面,而后端通过Struts2处理业务逻辑和数据操作,实现前后端的分离。 在"Extjs+Struts2系统后台管理框架"中,"新闻列表"功能通常涉及到以下几...

    EXT和JAVA例子

    2. EXT JS的Store和Model是如何工作的,以及如何配置它们来接收和显示数据。 3. 如何使用EXT JS的组件,例如GridPanel、FormPanel等,以及如何自定义组件样式和行为。 4. 前后端数据交换的JSON格式化和解析。 5. ...

Global site tag (gtag.js) - Google Analytics