- 浏览: 510780 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (299)
- Oracle(pl/sql_Erp_Pro*C) (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类(报表/图表) (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena:
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600:
楼主写的太好了,每天学习~~
Spring_MVC(6)测试 -
liutao1600:
太好了,每天学习你的文章~~~
Spring_MVC(3)表单页面处理 -
liutao1600:
学习了,太好了
Spring_MVC(2)控制层处理 -
liutao1600:
学习了~~~
Spring_MVC(1)构建简单web应用
Ext JS FormPanel 提交数据总结....
文章分类:Web前端
今天研究FormPanel提交表单数据研究了半天.. 终于把表单提交成功了... 趁现在还记得问题,做一下总结:
1. 实用FormPanel如何提交表单:
在Ext中FormPanel并中并不保存表单数据,其中的数据是由BasicForm保存,在提交表单的时候需要获取当前FormPanel中的BasicForm来进行提交.
获取FormPanel中的BasicForm对象代码如下:
var pnlLogin = new Ext.FormPanel({ //省略 }); //获取BasicForm对象 pnlLogin.getForm();
在获取BasicForm对象后便可进行表单的提交操作... 此时需要查一下BasicForm 的API文档, 文档中说,需要调用submit();方法进行提交:
Shortcut to do a submit action.
Parameters:
* options : Object
The options to pass to the action (see doAction for details)
Returns:
* BasicForm
this
由API文档可以知道,submit方法实际上是调用了BasicForm的doAction()方法, 而doAction放法在API文档中的描述如下:
Performs a predefined action (Ext.form.Action.Submit or Ext.form.Action.Load) or a custom extension of Ext.form.Action to perform application-specific processing.
Parameters:
* actionName : String/Object
The name of the predefined action type, or instance of Ext.form.Action to perform.
* options : Object
(optional) The options to pass to the Ext.form.Action. All of the config options listed below are supported by both the submit and load actions unless otherwise noted (custom actions could also accept other config options):
o url : String
The url for the action (defaults to the form's url.)
o method : String
The form method to use (defaults to the form's method, or POST if not defined)
o params : String/Object
The params to pass (defaults to the form's baseParams, or none if not defined)
o headers : Object
Request headers to set for the action (defaults to the form's default headers)
o success : Function
The callback that will be invoked after a successful response. Note that this is HTTP success (the transaction was sent and received correctly), but the resulting response data can still contain data errors. The function is passed the following parameters:
+ form : Ext.form.BasicForm
The form that requested the action
+ action : Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.
o failure : Function
The callback that will be invoked after a failed transaction attempt. Note that this is HTTP failure, which means a non-successful HTTP code was returned from the server. The function is passed the following parameters:
+ form : Ext.form.BasicForm
The form that requested the action
+ action : Ext.form.Action
The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.
o scope : Object
The scope in which to call the callback functions (The this reference for the callback functions).
o clientValidation : Boolean
Submit Action only. Determines whether a Form's fields are validated in a final call to isValid prior to submission. Set to false to prevent this. If undefined, pre-submission field validation is performed.
Returns:
* BasicForm
this
这里actionName只能是 load 和 submit。 当然提交的时候使用submit...
看了这么多的API文档, 其实关于表单提交操作并没有结束, 从doAction方法的描述中可以看出.. 这里实际上是调用了Ext.form.Action这个类, 而submit操作是调用了该类的子类Ext.form.Action.Submit... 绕了一大圈,终于把Ext中FormPanel是如何提交表单的原理搞的差不多了.. 那么下来就可以上代码了:
- var winLogin = new Ext.Window({
- title:'登录',
- renderTo:Ext.getBody(),
- width:350,
- bodyStyle:'padding:15px;',
- id:'login-win',
- buttonAlign:'center',
- modal:true,
- items:[{
- xtype:'form',
- defaultType:'textfield',
- bodyStyle : 'padding:5px',
- baseCls : 'x-plaints',
- url:'ajaxLogin.do',
- method:'POST',
- defaults:{
- anchor:'95%',
- allowBlank:false
- },
- items:[{
- id:'loginName',
- name:'loginName',
- fieldLabel:'用户名',
- emptyText:'请输入用户名',
- blankText:'用户名不能为空'
- },{
- id:'password',
- name:'password',
- fieldLabel:'密码',
- blankText:'密码不能为空'
- }]
- }],
- buttons:[{
- text:'登录',
- handler:function(){
- //获取表单对象
- var loginForm = this.ownerCt.findByType('form')[0].getForm();
- alert(loginForm.getValues().loginName);
- loginForm.doAction('submit', {
- url:'ajaxLogin.do',
- method:'POST',
- waitMsg:'正在登陆...',
- timeout:10000,//10秒超时,
- <SPAN style="COLOR: #ff0000">params:loginForm.getValues(),//获取表单数据</SPAN>
- success:function(form, action){
- var isSuc = action.result.success;
- if(isSuc) {
- //提示用户登陆成功
- Ext.Msg.alert('消息', '登陆成功..');
- }
- },
- failure:function(form, action){
- alert('登陆失败');
- }
- });
- this.ownerCt.close();
- }
- }, {
- text:'重置',
- handler:function(){
- alert('reset');
- this.ownerCt.findByType('form')[0].getForm().reset();
- }
- }]
- });
- winLogin.show();
var winLogin = new Ext.Window({
title:'登录',
renderTo:Ext.getBody(),
width:350,
bodyStyle:'padding:15px;',
id:'login-win',
buttonAlign:'center',
modal:true,
items:[{
xtype:'form',
defaultType:'textfield',
bodyStyle : 'padding:5px',
baseCls : 'x-plaints',
url:'ajaxLogin.do',
method:'POST',
defaults:{
anchor:'95%',
allowBlank:false
},
items:[{
id:'loginName',
name:'loginName',
fieldLabel:'用户名',
emptyText:'请输入用户名',
blankText:'用户名不能为空'
},{
id:'password',
name:'password',
fieldLabel:'密码',
blankText:'密码不能为空'
}]
}],
buttons:[{
text:'登录',
handler:function(){
//获取表单对象
var loginForm = this.ownerCt.findByType('form')[0].getForm();
alert(loginForm.getValues().loginName);
loginForm.doAction('submit', {
url:'ajaxLogin.do',
method:'POST',
waitMsg:'正在登陆...',
timeout:10000,//10秒超时,
params:loginForm.getValues(),//获取表单数据
success:function(form, action){
var isSuc = action.result.success;
if(isSuc) {
//提示用户登陆成功
Ext.Msg.alert('消息', '登陆成功..');
}
},
failure:function(form, action){
alert('登陆失败');
}
});
this.ownerCt.close();
}
}, {
text:'重置',
handler:function(){
alert('reset');
this.ownerCt.findByType('form')[0].getForm().reset();
}
}]
});
winLogin.show();
注意红色的部分... 这里是得到BaiscForm中所有表单元素中的值,并且已String/Object键值对的形式保存。。 该方法在api文档中的描述如下:
Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit. If multiple fields exist with the same name they are returned as an array.
Parameters:
* asString : Boolean
(optional) false to return the values as an object (defaults to returning as a string)
Returns:
* String/Object
如此提交解决了提交表单时无法发送数据的问题....
到这里终于解决了 如何提交表单的问题...
2. 为什么没有执行submit中的success方法, failure方法是在什么时候会被执行..
这里还是需要 查Action类中的success属性的API文档描述...
The function to call when a valid success return packet is recieved. The function is passed the following parameters:
* form : Ext.form.BasicForm
The form that requested the action
* action : Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.
这里 success方法需要两个参数, 尤其是第二个参数的描述: 尤其result, 这里是可以点击的
点击后随即跳到了Action result属性的描述:
The decoded response object containing a boolean success property and other, action-specific properties.
有此描述可知,服务器返回的响应中需要包含一个 boolean 型的 success 字段, 该字段会保存在result中,Action会通过获取对该字段的描述 来判断是否执行 success 方法。。
那么服务器如何返回boolean型的success字段呢? 服务器段部分代码如下:
- try {
- //返回成功标识
- <SPAN style="COLOR: #ff0000">response.getWriter().println("{success:true}");</SPAN>
- response.getWriter().flush();
- } catch (IOException e) {
- e.printStackTrace();
- } finally {
- try {
- response.getWriter().close();
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
try {
//返回成功标识
response.getWriter().println("{success:true}");
response.getWriter().flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
response.getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
}
就这些东西让我研究了一下午... 实在头大... 泡杯茶 休息会先....
发表评论
-
Ext tree add update delete
2010-09-26 16:33 1461Ext.onReady(function() { // 树 ... -
Ext树操作
2010-09-26 13:04 1104后台树节点定义 menu_info { menu_ ... -
Ext动态grid
2010-08-24 23:54 1574在做报表的时候,需要 ... -
Extjs 工具
2010-08-19 12:24 809调试工具:调试ExtJs利器 - Firebug( ... -
Extjs upload(ext官网例子)
2010-08-16 14:08 8978http://dev.sencha.com/deploy/de ... -
Extjs uploadDialog
2010-08-16 13:08 1745Extjs里文件上传需要扩展的组件,自己在做extjs例子,没 ... -
Extjs php fileupload
2010-08-16 13:00 1573upload.html <html> < ... -
ext renderer
2010-08-10 22:04 2301renderer:function(value, cellm ... -
timefield demo
2010-08-09 15:10 1170<mce:script type="text/ ... -
ext datefield timefield and format
2010-08-09 15:06 2137DateField TimeField 日期控件 时间控件 日 ... -
Extjs form
2010-08-07 19:30 3168OK,前面我们已经学过了GridPanel,TabPanel ... -
Extjs 学习
2010-08-07 11:45 694http://blog.csdn.net/lenotang/a ... -
深入浅出Ext_JS:数据存储与传输
2010-07-09 15:44 752附件 -
ext radiogroup
2010-07-06 21:10 2465Ext.onReady(function () { ... -
Ext builder 和ext网站
2010-06-28 09:05 926http://tof2k.com/ext/formbuilde ... -
extjs 打印
2010-06-22 20:56 2520function () { /** * Pr ...
相关推荐
在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。FormPanel中的 form对象为Ext.form.BasicForm类型的对象,它有load和submit方法分别用于加载数据和提交数据。而这两个方法都是通过调用 ...
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
extjs_php向后台提交json_post的接收方法实例 php接口json数据用$_post[]方法无效时使用
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
本平台是经本人对...数据格式采用json格式上传下载,实现前端表格提交数据后台可能相应的更新数据的功能。本人水平有限,有不足的地方,请多包涵,本产品仅供学习,需要实际开发应用还有些bug,需要自己去改。
Extjs4.0动态填充combobox数据 Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 ...
实现treegrid组件的(CRUD)读取、新增、修改、删除 //设置grid单元格处于编辑状态 ...//异步Ajax提交新增数据 insertdb:function(newrecords) //异步Ajax提交修改数据 updatedb:function(updaterecords)
17. displayfield - xtype: 'displayfield', 描述: 仅显示,不校验/不被提交的文本框 18. radiogroup - xtype: 'radiogroup', 描述: 编组的单选按钮(Since 2.2) 图表组件 1. chart - xtype: 'chart', 描述: 图表...
三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章:悬停提示与...
原Extjs4.2似乎不支持Send数据时转JSON,资源里的修改Ext-all.js文件,添加参数extraParams:{wt:"json"}send时会转Json数据提交。 解决“无效的 JSON 基元”的问题
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
Ajax+JSON 改善Form提交数据的 UI 交互设计
业务流程执行:流程的启动、任务的提交、回退、撤销、取回、处理任务等操作、 实用需求实现:执行权限、工作流留痕、事务提醒 只需一套实现,你的业务只要在挂接中配置则可以具有工作流功能 业务方面:OA项目实战
4.3.3 Ajax模式的表单数据提交 4.3.4 标准模式的表单数据提交 4.3.5 使用Direct技术 4.4 本章小结 第5章 面板及布局类 5.1 面板panel 5.1.1 认识Ext.panel.Panel 5.1.2 Ext.panel.Panel的主要功能 5.1.3 ...
a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, params: a.params, waitMsg: “正在提交数据…”, success: function(c, d) { Ext.ux.Toast.msg(“操作信息”, “成功信息保存!...
12.1.3 Ext.Ajax.request提交XML数据 12.2 Ext.Updater基础 12.2.1 Ext.Updater.update方法 12.2.2 Ext.Updater.update操作示例 12.3 利用Ajax优化Web应用框架 12.3.1 多级联动菜单 12.3.2 Ajax修改用户密码 ...
最完善的ExtJS与Java后台通信,两种数据传输第一种采用的是JSon,第二种是采用直接提交Form表单,个人觉得ExtJS比Flex与Java通信要简单写,呵呵。谁有WebService学习资料告诉我啊,要自己写WebService了哈。
接收到中心库房提交的验货单与发送过来的货物和分发单,比较相同则可作入库操作,并置中心库房出库订单为配送站到货订单。 7、分站管理员:完成商品的投递,具体包含:给配送员派单,并作结单操作。订单状态由配送站...
提交数据前用Ext.Msg.wait(‘提示’,’正在处理数据,请稍候’);弹出等待条,数据处理成功后用Ext.Msg.hide();将等待去掉,例如: Ext.Msg.wait(‘提示’,’正在处理数据,请稍候’); 代码如下: Ext.Ajax.request({ ...
业务流程执行:流程的启动、任务的提交、回退、撤销、取回、处理任务等操作、 实用需求实现:执行权限、工作流留痕、事务提醒 只需一套实现,你的业务只要在挂接中配置则可以具有工作流功能 业务方面:OA项目实战...