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.Net学习笔记20:Ext.Net FormPanel 复杂用法

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 一个for列出横纵坐标

    h = i % * hCount; v = Math.floor(i / hCount);

  2. linux监控nmon和analyser的使用

    测试压力的时候使用linux一个简单的监控工具nmon,不仅可以实时监测,也可以生成文件以图标样式展现,小巧实用 安装nmon nmon实际上是个tarball直接解压到所要放置的目录,然后直接运行就 ...

  3. 【转】Java中如何遍历Map对

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  4. Linux下使用fdisk发现磁盘空间和使用mount挂载文件系统

    若在安装Linux系统时没有想好怎么使用服务器,开始时只分了一部分给根目录.后面需要再使用时,可以通过几下一步进行分区和挂载文件系统. 看磁柱数使用情况 fdisk -l Disk /dev/sda: ...

  5. 书评<<剑指offer 名企面试官精讲典型编程题>>

      前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...

  6. (转)ubuntu 14.04下安装hadoop2.6(伪分布式)

    安装: http://pingax.com/install-hadoop2-6-0-on-ubuntu/   写的非常好(国外人比较实在,他说的单机实际上是伪分布式...). 另外要注意的是,如果对新 ...

  7. JavaWeb学习记录(八)——servlet获取配置信息

    jdbc.properties内容如下: jdbcUrl=jdbc\:mysql\://localhost\:3306/animaluser=rootpass=root servlet获取资源信息代码 ...

  8. android中常见对话框之一AlertDialog

    在Android应用中,有多种对话框:Dialog.AlertDialog.ProgressDialog.时间.日期等对话框. (1)Dialog类,是一切对话框的基类,需要注意的是,Dialog类虽 ...

  9. php MySQL数据库操作类源代码

    php MySQL数据库操作类源代码: <?php class MySQL{ private $host; //服务器地址 private $name; //登录账号 private $pwd; ...

  10. VC线程中操作控件,引起程序卡死的问题。

    [问题还原] 线程中操作控件,具体为控制一个按键的使能,使能后结束线程. 主程序中有一个死循环,等待线程结束. 然后,就没有然后了-- [解决方案] 在主程序死循环中,如果检测到界面消息,优先处理掉.