ExtJS FormPanel提交数据给struts action
- FormPanel本身是没有提交功能的,它仅仅是一个前台UI控件,数据的提交是通过一个叫BasicForm的东西进行提交的。而后者的获得是通过getForm()方法来实现的,或者直接调用FormPanel的form属性也可以。
- 在BasicForm的submit方法中需要定义一个url属性,在这里url就是我们在struts.xml中配置的action的名字action name。
- 服务器端返回的数据是json格式,因此在struts.xml中需要为相应的action定义一个type为json的result。这个result不需要配置任何jsp页面。
- 服务器端的action类中需要定义【boolean类型的success和String类型的msg】两个只读属性,这两个属性会以json数据的形式回调BasicForm的两个方法success或者failure,当然到底调用哪一个要看success属性返回的值。但是无论是哪一个,程序如果需要页面跳转必须调用【window.location = "";】,因为我们已经不能使用struts来实现页面跳转了。记住,这两个只读属性名是固定的。
- 由客户端提交给action的数据,例如由textfield提交给action的数据,缺省情况下是通过POST方式提交的,从action的角度来看,这些数据是作为request的parameter传递过来的。那么这些parameters的名字是什么呢?就是那些客户端组件的id值。例如在FormPanel上有一个textfield,它的id值是"name",那么相应的在action中,请求传送过来的参数中就有一个名字叫name的parameter。此外,我们还可以定义同名的的只写属性,那么在客户端提交数据后,属性值将被写入到这些属性中,我们可以在服务器端直接得到表单提交的数据。
- 如果我们希望将所有数据一次性清空,那么可以调用BasicForm的reset()方法。
下面是一些常规的表单UI组件以及后台对应的数据类型:
UI组件
|
相应的ExtJS属性(主要部分)
|
后台Java Bean属性
|
xtype : 'textfield'
|
需要定义name或者id属性
|
与前台属性值相同的属性名,类型为String
|
xtype : 'datefield'
|
需要定义name或者id属性
|
与前台属性值相同的属性名,类型为Date
|
xtype : 'combo'
|
需要定义name或者id属性
|
与前台属性值相同的属性名,类型为String
|
xtype : 'radio'
|
需要定义name属性,同时必须定义inputValue属性,此外同一组的radio需要定义相同的name属性,而且所有radio要定义在同一个radiogroup之中。
|
与前台属性值相同的属性名,类型为String,获得的属性值必为某个inputValue或者null
|
xtype : 'checkbox'
|
需要定义name属性,同时必须定义inputValue属性,此外同一组的checkbox需要定义相同的name属性,而且所有checkbox需要定义在同一个checkboxgroup之中。
|
与前台属性值相同的属性名,类型为String,获得的属性值必为某个inputValue或者以逗号分割的多个inputValue,或者null
|
对于文件上传来说,需要注意以下几个方面:
- 在FormPanel中设置一个属性【fileUpload : 'true'】;
- 在jsp页面中引入FileUploadField.js文件,这个文件的路径是【"${pageContext.request.contextPath}/ux/fileuploadfield/FileUploadField.js"】;
UI组件
|
相应的ExtJS属性(主要部分)
|
后台Java Bean属性
|
xtype : 'fileuploadfield'
|
需要定义name属性,name : 'xyz'
|
Struts1/2是不同的,这里以struts2为例。根据情况,需要定义三个属性中的某个或某几个。它们分别是:
File xyz; --- 真正的文件;
String xyzFileName; --- 文件名字;
String xyzContentType; --- 文件类型;
多文件上传时,需要将属性定义为List类型;
|
这里需要注意的是:一定要在你的jsp页面中引用fileuploadfield.css,否则的话,你将发现有两个控件,一个是ExtJS的控件,一个是HTML的控件,两者互相覆盖,并且前者并不起作用。同时文件上传一样受struts的文件上传大小的限制。
在使用文件上传组件的过程中,发现一个问题,那就是当数据提交后,浏览器会弹出一个下载json文件的窗口,而不是调用相应的回调函数,网上没有查到原因。只有相应的处理方法。
- 首先在struts action中将返回值设为null;正常情况下是返回success;
- 调用response的输出流的write方法,按照后台程序的处理结果将字符串【"{success : true或者false, msg : '你的信息返回值'}" 】直接输出到客户端;只有这样才能正常执行;否则的话struts不会按照json格式序列化数据并返回。不知道这是文件上传组件的问题,还是怎么回事。总之一定要这么做才行。
handler与listener的区别
Handler
handler与Action相关联,一个Action可以有多个Component引用;
Action是一个可被共享的对象,有五个主要的属性:text, handler, iconCls, disabled, hidden
component的构建方式比较有意思:
new Ext.Button(action)
是Button接收一个Action对象作为构造参数吗?但是查看Button的API却没有发现action属性。反而Button的构造参数是一个(Object config),也就是说,只是一个配置对象(包含各种属性),而Action的五个属性正好Button也都有,所以,可以接收一个Action来进行构造。
其他属性不考虑,看handler,Button中的handler配置项文档说明,这个handler是与click Event关联的。也就是说,click是Button这个Component的首要Event(参考Action中handler的文档),这就是Handler的运行方式:被某个组件的首要Event所触发。
Listener
上面说了handler是对首要Event的响应函数,而关于Event, Observable才是根源。
Ext.util.Observable是一切可进行事件监测之对象的父类(或者接口)。Observable只有一个配置项,那就是listeners,而一个listener是一个事件名 + 处理函数的组合,如:
"click" : function(){...}, "mouseOver" : function(){....}
Observable还提供了很多相关的处理事件的方法,比如添加事件,触发事件,移除监听器等等。
由上分析可以总结一下:
1、handler是一个特殊的listener;
2、handler是一个函数,而listener是<event , 函数>对;
3、handler与Action相关,用来让多个组件共享一个Action。而listener与Event相关,可以对Event进行方便的管理;
但是handler与普通的event + listener组合还是有一些不同,一个例子就是,如果用
Ext.util.Observable.capture(button, function(name){ if (name=="click") return false})
来事先捕获click事件,并阻止click时,如果Button的click是通过handler来响应的,则capture的return false函数无效,而如果button是定义了包含click事件的listener,则上面的capture生效。
分享到:
相关推荐
handler与Action相关联,一个Action可以有多个Component引用; Action是一个可被共享的对象,有五个主要的属性:text, handler, iconCls, disabled, hidden component的构建方式比较有意思: new Ext.Button...
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
介绍了两种Extjs formpanel加载数据的方式,有需要的朋友可以参考一下
Extjs4文件上传,后台struts2
Extjs Tree + JSON + Struts2 例子
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
extjs动态树struts请求数据json数据格式
Extjs4+MVC+struts2后台管理系统,
Extjs Tree + JSON + Struts2 开发war包
Extjs Tree + JSON + Struts2 示例源代码
eclipse下EXTJS4+STRUTS2+JAVA增删改查的完整例子
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 ...
extjs tree + json+struts2示例源代码extjs tree + json+struts2示例源代码
extjs向action提交的方法,由Ext界面提交到action的两种方法,点击id为save的按钮时,执行loginFun函数。
extjs4.2+ibatis+struts 构建的日程表插件 在原生前端的基础上修改为前后结合的ajax版本
Extjs4 表单从数据库读取数据映射到对应的字段中显示
extjs formpanel学习,秘诀,笔记
Struts2与extjs整合例子
Struts2、 Hiberante、 Spring、 Extjs、 OA办公系统,完整包