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. buildroot ntp 网络时钟同步

    /********************************************************************** * buildroot ntp 网络时钟同步 * 说明: ...

  2. python中的re模块和正则表达式基础

    1.正则匹配基础知识 (1)通配符. .只匹配一个字符 >>> re.findall("p.ckname","piiickname-pockname&q ...

  3. Think Python - Chapter 15 - Classes and objects

    15.1 User-defined typesWe have used many of Python’s built-in types; now we are going to define a ne ...

  4. Spring AOP配置文件

    在<aop:config>...</aop:config>报错: Multiple annotations found at this line: - cvc-complex- ...

  5. Git常用命令总结(超实用)

    导读 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.一般来说,日常使用Git只要记住下图6个命令,就可以了.但是熟练使用,恐怕要记住60-100个命令. 下面是我整 ...

  6. Win+R运行自定义程序应该这样玩

    互联网是一个“生态圈”,Windows有自己的生态学,有些看似高效的“奇技淫巧”实则只是搞笑. 我很以前十分崇拜善用佳软的站长,对事不对人,有些弊端,只是我们不知道,但并不代表就没有. 有些“恍然大悟 ...

  7. spring+websocket整合

    java-websocket的搭建非常之容易,没用框架的童鞋可以在这里下载撸主亲自调教好的java-websocket程序: Apach Tomcat 8.0.3+MyEclipse+maven+JD ...

  8. php部分---面向对象静态、抽象类、oop接口、加载类、魔术方法、关键字。

    静态  static关键字 普通成员普通成员是属于对象的 静态成员静态成员是属于类的 普通方法里面可以调用静态成员静态方法里面不能调用普通成员self关键字 在类里面代表该类 普通类class Ren ...

  9. Docker网络管理

    一.Docker的四种网络模式(host.container.none.bridge) 1. host模式,使用docker run时使用--net=host指定,docker使用的网络实际上和宿主机 ...

  10. nginx配置说明

    #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...