Ext FormPanel跟Struts2实现登陆界面 _Web前端

Ext FormPanel和Struts2实现登陆界面

今天弄了一天，一直在弄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即可，哎~