今天弄了一天,一直在弄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即可,哎~
分享到:
相关推荐
2. **表单(FormPanel)**:登录界面的核心是一个表单,用于收集用户输入。EXTJS4的FormPanel提供了一种组织表单元素的方式,可以添加验证规则,并能方便地与服务器通信以提交数据。 3. **数据绑定(Data Binding)...
本文将深入探讨如何使用Struts2和ExtJS3实现单文件和多文件的上传功能。 首先,我们要理解文件上传的基本流程。在Web应用中,用户通过浏览器选择本地文件,然后这些文件的数据被封装到HTTP请求中发送到服务器。...
在实际开发过程中,开发者需要理解每个框架的核心概念和用法,例如Struts2的Action和Result,EXT的GridPanel和FormPanel,Spring的Bean配置和AOP注解,Hibernate的实体类和映射文件,JPA的实体和查询,以及EJB的...
本项目“extjs3.2+struts2实现多文件上传excel并插入到数据库”是针对这一需求的具体解决方案,利用了ExtJS 3.2前端框架和Struts2后端框架进行开发。 **ExtJS 3.2** 是一个基于JavaScript的富客户端应用框架,提供...
Ext的formpanel table布局实例,有效解决了页面resize时列宽不跟随改变的问题,即列宽的自适应宽度
在"struts+extjs实现UploadDialog"这个主题中,我们主要讨论如何利用Struts和ExtJS来创建一个文件上传对话框。UploadDialog通常是一个交互式的用户界面,允许用户选择本地文件并将其上传到服务器。 首先,让我们从...
本文将深入探讨如何实现自我扩展的FormPanel和Store,以及它们如何实现自动数据触发感知功能和与Store的绑定。 首先,让我们理解FormPanel和Store的基本概念。FormPanel是一个用于创建表单的组件,它提供了丰富的...
总结,实现"Ext相册实现文件拖拽,实时上传进度,本地预览"的功能,需要结合EXT4的前端组件能力、HTML5的File API和Drag and Drop API,以及Servlet或Struts2在后端进行文件处理。这样的组合不仅提升了用户体验,也...
在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...
在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...
2. **数据绑定**:可能会涉及到如何将后端数据源(如数据库)与Ext.NET控件绑定,实现数据的动态加载和更新。 3. **事件处理**:展示如何处理Ext.NET控件的客户端事件,如按钮点击、行选择等,并在C#后台进行响应。...
EXT2.2与Java的整合通常通过Spring MVC、Struts2等框架实现,通过JSON或XML进行数据交互。开发者可以利用EXT2.2创建前端界面,然后通过HTTP请求与Java后端进行通信。 **CHM文件** "Ext2.2API中文版(最终完成版)....
在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例,包括与MySQL数据库的交互。 **1. Ext....
结合以上内容,开发者可以通过ExtJS创建富客户端界面,利用Struts处理业务逻辑和控制流程,形成前后端分离的开发模式,提高应用的可维护性和用户体验。在实际开发中,需要理解并熟练掌握两者的核心概念和使用技巧,...
在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 JS 2.2框架的重要参考资料,对于开发者来说尤其有价值,特别是那些中文为母语的开发者,它使得理解框架的功能和用法更加方便。...
这种组合允许前端利用ExtJS的强大界面组件来提供美观、交互性强的用户界面,而后端通过Struts2处理业务逻辑和数据操作,实现前后端的分离。 在"Extjs+Struts2系统后台管理框架"中,"新闻列表"功能通常涉及到以下几...
2. EXT JS的Store和Model是如何工作的,以及如何配置它们来接收和显示数据。 3. 如何使用EXT JS的组件,例如GridPanel、FormPanel等,以及如何自定义组件样式和行为。 4. 前后端数据交换的JSON格式化和解析。 5. ...