Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法

时间:2022-02-01 10:26:14

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)数据一同发送的方法的更多相关文章

  1. HTML+CSS学习笔记(5)- 与浏览者交互,表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  2. 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  3. Ext&period;Net学习笔记20:Ext&period;Net FormPanel 复杂用法

    Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel ...

  4. Ext&period;Net学习笔记21:Ext&period;Net FormPanel 字段验证(validation)

    Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...

  5. 【Ext&period;Net学习笔记】03:Ext&period;Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  6. 【Ext&period;Net学习笔记】06:Ext&period;Net GridPanel的用法(GridPanel 折叠&sol;展开行、GridPanel Selection、 可编辑的GridPanel)

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  7. 【Ext&period;Net学习笔记】05:Ext&period;Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总&lpar;Summary&rpar;的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  8. 【Ext&period;Net学习笔记】04:Ext&period;Net中使用数据、Ext&period;Net Store的用法、Ext&period;Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  9. 【Ext&period;Net学习笔记】01:在ASP&period;NET WebForm中使用Ext&period;Net

    Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...

随机推荐

  1. JSON学习

    1.JSON 语法是 JavaScript 对象表示语法的子集. l  数据在名称/值对中 l  数据由逗号分隔 l  花括号保存对象 l  方括号保存数组 JSON 值可以是: l  数字(整数或浮 ...

  2. C&num; 将对象保存为文件 读取文件并转为对象 压缩文件 解压缩文件

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. POJ 2724

    Purifying Machine Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 4014   Accepted: 1127 ...

  4. Dispatcher &amp&semi; Redirect

    首先理解一下二者的含义:Dispatcher请求转发,直接把客户端的请求在服务器处理以后跳转到下一个页面或者是处理类.此时的地址栏上的URL是不会变化的. Redirect是重定向.客户端的请求到达服 ...

  5. django restframework permission

    与 authentication 和 throttling 一起,permission 决定是应该接受还是拒绝访问请求.权限检查总是在视图的最开始处运行,在任何其他代码被允许进行之前.权限检查通常会使 ...

  6. 13&rpar;django-ORM&lpar;连表一对多,外键创建,创建数据,3种查询&rpar;

    一对多需要使用外键 一:外键创建ForeignKey b=models.ForeignKey(to="Business",to_field=("id"))#dj ...

  7. Linux下设置redis的密码和远程访问

    编辑vi /etc/redis/redis.conf ,有的是vi /etc/redis.conf ,在68行修改:bind 127.0.0.1 ::1 为 bind 0.0.0.0 ::1,这样就可 ...

  8. no OPENSSL&lowbar;Applink错误的解决方法

    原文链接: http://www.cnblogs.com/sdnyzhl/archive/2012/12/11/2813210.html 自己按照openssl中介绍的编译,安装openssl,其间编 ...

  9. TF-IDF理解及其Java实现

    TF-IDF 前言 前段时间,又具体看了自己以前整理的TF-IDF,这里把它发布在博客上,知识就是需要不断的重复的,否则就感觉生疏了. TF-IDF理解 TF-IDF(term frequency–i ...

  10. C&num; 生成word文档(NPOI)

    using NPOI.XWPF.UserModel XWPFDocument doc = new XWPFDocument(); //创建新的word文档 XWPFParagraph p1 = doc ...