Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端。默认情况下,表单(Form)里的表格(Grid)数据是不随表单一起发送的,这个时候就需要我们将表格里的数据做一下处理。有两种思路,第一种就是发送完Form以后用一个回调函数,再将Grid的数据取出来再发送,这样略嫌麻烦,还得考虑表单发送成功与否等问题;第二种就是讲Grid里的数据分别遍历出来,组成一个Json数据,放到表单里隐藏的一个域里,然后随表单一起发送出去。我采取的是第二种方法,详细代码如下:
var myStore = Ext.getCmp('myGrid').getStore(); //取出列表的Store
var myRecord= myStore.getRange(); //将Store里的所有record放到myRecord里
var myJson = [];
for(var i in myRecord){ //遍历所有的record,将其放置在对应的myJson数组里
myJson .push({
'a': myRecord[i].get('a'),
'b': myRecord[i].get('b'),
'c': myRecord[i].get('c'),
'd': myRecord[i].get('d'),
'e': myRecord[i].get('e'),
...................................
});
};
Ext.getCmp('hiddenField').setValue(Ext.encode(myJson));//编译myJson数组为一个Json对象,并放置在id为‘hiddenField’的隐藏域里,注意隐藏域要放置在表单里。
好了,这样再提交表单的时候,就会将表格(Grid)里的数据随着表单一起发送到服务器端,而且是以Json数据格式发送的。
---------------------------------------华丽的分割线--------------------------------------
昨天在开发的时候遇到了同样的问题,但是这次是不用随表单一同发送的,而是单独发送出去grid的数据。其实在官方有推荐的方法,一同将数据发送过去到服务器端。这次呢,来一个笨方法,直接封装到json数据里,用一个ajax请求发送到服务器端即可。代码如下:
Ext.Ajax.request({
url: 'your_url' ,
params: {
id: this.id,
jsonData: Ext.encode(myJson)/其中myJson即是上面封装好了的myJson数据
},
success: function(response){
var text = response.responseText;
alert(text);
}
});
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法的更多相关文章
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法
Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel ...
- Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)
Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...
- 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
随机推荐
- ASP.NET定制简单的错误处理页面
通常Web应用程序在发布后,为了给用户一个友好界面和使用体验,都会在错误发生时跳转至一个自定义的错误页面,而不是ASP.net向用户暴露出来的详细的异常列表. 简单的错误处理页面可以通过web.con ...
- 如何用cufflinks 拼出一个理想的注释文件
后记: cufflinks安装: 下载安装包, 不要下载source code ,直接下载binary. Source code Linux x86_64 binary http://cu ...
- python os.path 模块
os.path模块用法: 1, os.path.basename() >>> os.path.basename('/share/Public/cmiao')'cmiao' basen ...
- javascript 字符串方法名调用
项目中有时候需要通过字符串传递方法名称,供页面调用 var ParameterDefaultCallMethod = Request("ParameterDefaultCallMethod& ...
- Protobuf C/C++实战笔记(1)
前言: Protobuf作为数据交换格式, 被很多人喜欢. 数据压缩比高, 向后兼容性强, 性能优异, 而且对平台中性, 支持多语言(C/C++, JAVA, Python). 优点太多, 实在不胜枚 ...
- ZSDRM001-发货清单
REPORT ZSDRM001 LINE-SIZE 225 LINE-COUNT 65 NO STANDARD PAGE HEADING.*------------------------------ ...
- 143. Reorder List
Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...
- SQL注入测试平台 SQLol -2.SELECT注入测试
前面,我们已经安装好了SQLol,打开http://localhost/sql/,首先跳转到http://localhost/sql/select.php,我们先从select模块进行测试. 一条完成 ...
- Android 客户端和服务器 json交互
http://www.cnblogs.com/jyan/articles/2544974.html 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. ...
- jqueryflot图表x轴坐标过长完美解决方案(转)
近段时间,项目中使用到了flot这个图表工具,在实际使用的过程中,遇到了一个看似很简单的问题:当坐标的刻度如果过长时,会重叠在一起,影响阅读: 看到这个效果后的第一反应就是,能不能让坐标斜着显示啊?去 ...