- 浏览: 920105 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (251)
- WebService (17)
- IBatis (22)
- Hibernate (1)
- SpringMVC - 基础篇 (32)
- Spring (15)
- Java (11)
- JVM及调优 - 基础篇 (4)
- 集群 (14)
- 数据库 (17)
- WebSphere (5)
- 多线程 (4)
- 集合、容器 (2)
- DB Pool (1)
- Power Designer (5)
- Maven基础 (5)
- JS (14)
- WEB 前端 (5)
- 实用小工具 (17)
- 社会、人 (2)
- 乱七八糟 (18)
- ASM&CGLIB - 基础篇 (12)
- 缓存 (1)
- 性能 (1)
- 设计之殇 (1)
- 分布式事务 (1)
- 单点登录 (11)
- 分布式 Session (4)
- Memcached - 基础篇 (6)
最新评论
-
一笑_奈何:
楼主写的还真行不错。
扫盲贴 - J2EE集群之JNDI集群实现 -
xuezhongyu01:
博主写的很详细,但最后还是没明白,最后调用BasicDataS ...
Spring中的destroy-method方法 -
Mr梁:
commons-fileupload.jar commons- ...
SpringMVC 中文件上传 MultipartResolver -
Eywa:
总结的很不错
ORACLE CASE WHEN 及 SELECT CASE WHEN的用法 -
TryRelax:
fastjson 比 jackson 好用吧?
Spring MVC Jackson DateFormat
一、 EXT提交服务器的三种方式
1. EXT的form表单ajax提交(默认提交方式)
相对单独的ajax提交来说优点在于能省略写参数数组
FormPanel
在Ext中FormPanel并中并不保存表单数据,其中的数据是由BasicForm保存,在提交表单的时候需要获取当前 FormPanel中的BasicForm来进行提交.
获取FormPanel中的BasicForm对象代码如下:
var pnlLogin = new Ext.FormPanel({ //省略 }); //获取BasicForm对象 pnlLogin.getForm();
在获取BasicForm对象后便可进行表单的提交操作... 此时需要查一下BasicForm 的API文档, 文档中说,需要调用submit();方法进行提交:
BasicForm submit方法API 写道
submit( Object options ) : BasicForm
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文档中的描述如下:
BasicForm doAction() API 写道
doAction( String/Object actionName, [Object options] ) : BasicForm 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
其实关于表单提交操作并没有结束, 从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秒超时, 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();
注意params:loginForm.getValues(),//获取表单数据的部分...
这里是得到BaiscForm中所有表单元素中的值,并且已String/Object键值对的形式保存。。 该方法在api文档中的描述如下:
BasicForm getValues API 写道
getValues( [Boolean asString] ) : String/Object 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
如此提交解决了提交表单时无法发送数据的问题....
到这里终于解决了 如何提交表单的问题...
为什么没有执行submit中的success方法, failure方法是在什么时候会被执行..
这里还是需要 查Action类中的success属性的API文档描述...
success : Function 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属性的描述:
Action result属性 API 写道
result : Object 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(); } }
将按钮添加单击事件,执行以下方法
1. function login(item) { 2. 3. if (validatorForm()) { 4. // 登录时将登录按钮设为disabled,防止重复提交 5. this.disabled = true; 6. 7. // 第一个参数可以为submit和load 8. formPanl.form.doAction('submit', { 9. 10. url : 'user.do?method=login', 11. 12. method : 'post', 13. 14. // 如果有表单以外的其它参数,可以加在这里。我这里暂时为空,也可以将下面这句省略 15. params : '', 16. 17. // 第一个参数是传入该表单,第二个是Ext.form.Action对象用来取得服务器端传过来的json数据 18. success : function(form, action) { 19. 20. Ext.Msg.alert('操作', action.result.data); 21. this.disabled = false; 22. 23. }, 24. failure : function(form, action) { 25. 26. Ext.Msg.alert('警告', '用户名或密码错误!'); 27. // 登录失败,将提交按钮重新设为可操作 28. this.disabled = false; 29. 30. } 31. }); 32. this.disabled = false; 33. } 34. }
2. EXT表单的非ajax提交
在表单需加入下列代码
1. //实现非AJAX提交表单一定要加下面的两行! onSubmit : Ext.emptyFn, submit : function() { 2. //再次设定action的地址 3. this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post'; 4. //提交submit 5. this.getEl().dom.submit(); 6. },
3.EXT的ajax提交
1. 2. 3. Ext.Ajax.request({ 4. //请求地址 5. url: 'login.do', 6. //提交参数组 7. params: { 8. LoginName:Ext.get('LoginName').dom.value, 9. LoginPassword:Ext.get('LoginPassword').dom.value 10. }, 11. //成功时回调 12. success: function(response, options) { 13. //获取响应的json字符串 14. var responseArray = Ext.util.JSON.decode(response.responseText); 15. if(responseArray.success==true){ 16. Ext.Msg.alert('恭喜','您已成功登录!'); 17. } 18. else{ 19. Ext.Msg.alert('失败','登录失败,请重新登录'); 20. } 21. } 22. });
二、利用viewport布局左边区域系统菜单跳转两种方式
1,使用Ext.get('centerPanel').load(url:"aaa.jsp");url为必选参数还有其他可选参数 请参见api文档。缺点,加入的页面js无效
2,使用iframe,具体
Ext.get('centerPanel').dom.innerHTML='< i f r a m e src=aaa.jsp>< / i f r a m e >';
优 点可以在载入的页面动态加载js脚本(推荐使用)
发表评论
-
treegrid控件按条件查询和重加载的实现
2013-02-21 15:51 1751转载:http://www.iteye.com/topic/ ... -
TABLE 多表头固定问题(基本jquery插件)
2013-02-21 15:33 1812转载:http://www.cnblogs.com/dat ... -
Ext RowEditer.js 报错误this.items is undefined
2012-02-15 09:50 1566var editor = new Ext.ux.grid ... -
Ajax跨域访问解决方案
2012-02-14 14:09 5204一、为什么有跨域的问题 跨域问题存在实际上源 ... -
Extjs3.3.1扩展组件 BufferView
2012-02-07 11:34 2084一、现状情况 目前遇到一个这样的需求:大概有几千多 ... -
Extjs Tree简单使用
2012-01-11 11:35 3974一、 效果图: js部分: var ... -
全同运算符 "==="
2012-01-11 10:44 937在JavaScript中,"==="是全同 ... -
Ext 统计行
2011-12-08 14:06 1343统计行不参与grid中行的排序。 ExtJs统计行展示 ... -
ExtJS中Ext.Ajax.request与form1.getForm().submit
2011-11-20 00:10 2102相同点:都属于Ajax提交方式! 不同点:Ext.Aja ... -
Ext出现的问题:this.dom is undefined
2011-11-14 15:08 4045问题描述: 首先一个带有grid的页面,此页面弹 ... -
JSP引入含有ExtJs定义的组件的js文件并同步请求
2011-10-27 11:05 2927经常遇到这样的情况 ... -
js取当前url参数
2011-07-20 17:20 1952js没有提供取当前url参数的方法,只能是自己从中截取了,在网 ... -
ajax同步请求和异步请求
2011-07-02 11:18 3698ajax同步和异步的差异, 先看2段代码: 代码一: ...
相关推荐
其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...
3.9.1. 树形节点的拖拽有三种形式 3.9.2. 用事件控制拖拽 3.9.2.1. 叶子不能append 3.9.2.2. 把节点扔到哪里啦 3.9.2.3. 裟椤双树,常与无常 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊...
预编译的repro windows 版本,版本号 1.9 1,修改监听地址,替换所有192.168.0.177 的地址为你的服务器ip 2,运行服务器 双击运行 run_server.bat ...如果有其他问题请加QQ: 7700865 ,或将问题提交到我所在的群里
3.9.1. 树形节点的拖拽有三种形式 3.9.2. 用事件控制拖拽 3.9.2.1. 叶子不能append 3.9.2.2. 把节点扔到哪里啦 3.9.2.3. 裟椤双树,常与无常 3.10. 树形过滤器TreeFilter 3.11. TreeSorter对树形排序 4. 祝福吧!把...
3.9.1. 树形节点的拖拽有三种形式 3.9.2. 用事件控制拖拽 3.9.2.1. 叶子不能append 3.9.2.2. 把节点扔到哪里啦 3.9.2.3. 裟椤双树,常与无常 4. 祝福吧!把表单和输入控件都改成ext的样式。 4.1. 不用ext的...
7.3.4 格式化提交数据:ext.data.writer.writer、ext.data.writer.json和ext.data. writer.xml / 322 7.3.5 writer对象的配置项 / 325 7.4 数据模型 / 326 7.4.1 概述 / 326 7.4.2 数据类型及排序类型:ext....
1, 基本实现了数据的增删改操作; 2,表格的动态编辑刷新事件; 3,SpringMVC注解应用;...4,ExtJS表单提交,表格复选框,Ajax服务器提交; 5,外加邮件群发技术的实现; 适合初学者!大师就不要下载了!
为Button或其他控件加上下面两个属性即可1.UseSubmitBehavior=”false”使用服务器端提交机制,即执行OnClick事件。 2.OnClientClick客户端点击按钮后,设置控件为不可用,控件文本显示处理中…,待服务器端执行完...
三、提交表单至服务器 97 四、小结 100 第十六章:更多表单组件 102 一、您能说出哪些表单组件呢? 102 二、表单组件关系图 102 三、组件配置选项介绍 103 四、完整源代码 107 五、小结 112 第十七章:悬停提示与...
-修正TreeNode的属性NavigateUrl不接受服务器端URL(以~/开头)的BUG。 -增加Accordion和Tree配合使用的示例(other\accordion_tree_run.aspx)。 -修正Panel图标不能显示的BUG(CSS中class名不能有$字符)。 +去除...
性别 <asp:RadioButtonID="radSex1"runat="server"Checked="True"GroupName="seleSex"T ext="男"/> 女"/></td > </tr> <tr> <tdstyle="width: 125px"> 你喜爱的歌手是</td> ; text-align: left"> ...
它如何保证无论服务器端使用何种平台,客户端都无需进行修改? 3、数据与UI分离的优势已经被广大开发者所认可,Ext是如何做到这一点的? 4、你还在为自己没有美术功底而苦恼?你领略过Ext UI的迷人魅力吗?他在Ext 3...
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。...
整个系统都使用了AJAX(Asynchronous JavaScript and XML)技术,与服务器交互采用异步方式,真正实现了OPOA(One Page One Application)单页程序。减少了用户等待的时间,抛弃了传统的B/S那种,提交>等待>刷新。
在一次页面浏览过程中,客户端对一个URL发起浏览请求,服务端针对这次请求进行解析,而在字符编码解析方面,首先他检查该页面中的字符编码设置,即<... 而在Ext中的提交数据的过程中,Ext框架用的是都是
随时为任何.ico , .icns或.png图标提交拉取请求! .ico对于Windows .icns对于macOS(Apple图标图像格式) .png对于Linux 如果在此处找到了正确平台的图标,则可能不需要Nativefier的项来推断该特定目标网页的...
2.4.7 连接到服务器 41 2.4.8 搜索文件 41 2.4.9 最近的文档 42 2.5 系统菜单 42 2.5.1 首选项 42 2.5.2 系统管理 45 2.5.3 锁住屏幕 51 2.5.4 注销 51 2.5.5 关机 51 2.6 使用移动存储设备 51 2.6.1 浏览移动存储...
2.4.7 连接到服务器 41 2.4.8 搜索文件 41 2.4.9 最近的文档 42 2.5 系统菜单 42 2.5.1 首选项 42 2.5.2 系统管理 45 2.5.3 锁住屏幕 51 2.5.4 注销 51 2.5.5 关机 51 2.6 使用移动存储设备 51 2.6.1 浏览移动存储...
要添加自己的图像,请向提交拉取请求 最近在Symfony 4中进行了重写。 查看旧版本的“旧版”分支 API请求从lambda缓存 例子 香草JS: : jQuery: : 统计资料 要求 PHP 7.4以上 一些PHP包 作曲家 运行'./bin/...