Ext.ux.data.writer.FormParam,针对Ext.data.writer.Json这个类进行的修改,不同之处看红色标记除:
/**
* @class Ext.data.writer.Json
This class is used to write {@link Ext.data.Model} data to the server in a JSON format.
The {@link #allowSingle} configuration can be set to false to force the records to always be
encoded in an array, even if there is only a single record being sent.
* @markdown
*/
Ext.define('Ext.ux.data.writer.FormParam', {
extend: 'Ext.data.writer.Writer',
alias: 'writer.formParam',
/**
* @cfg {String} root The HTTP parameter name by which JSON encoded records will be passed to the server if the
* {@link #encode} option is `true`.
*/
root: undefined,
/**
* @cfg {Boolean} [encode=false] Configure `true` to send record data (all record fields if {@link #writeAllFields} is `true`)
* as a JSON encoded HTTP parameter named by the {@link #root} configuration.
*
* The encode option should only be set to true when a {@link #root} is defined, because the values will be
* sent as part of the request parameters as opposed to a raw post. The root will be the name of the parameter
* sent to the server.
*/
encode: false,
/**
* @cfg {Boolean} [allowSingle=true] Configure with `false` to ensure that records are always wrapped in an array, even if there is only
* one record being sent. When there is more than one record, they will always be encoded into an array.
*/
allowSingle: true,
/**
* @cfg {Boolean} [expandData=false] By default, when dot-delimited field {@link #nameProperty mappings} are
* used (e.g. `name: 'myProperty', mapping: 'my.nested.property'`) the writer will simply output a flat data
* object containing the mapping string literal as the property name (e.g. `{ 'my.nested.property': 'foo' }`).
*
* Mappings are used to map incoming nested JSON to flat Ext models. In many case, the data output by the
* writer should preferrably match the original nested data format. Setting this config to `true` will ensure
* that the output will instead look like `{ my: { nested: { property: 'foo' }}}`. The output is generated
* by {@link #getExpandedData}, which can optionally be overridden to apply more customized logic.
*/
expandData: false,
/**
* @protected
* The Reader classes support dot-delimited data mappings for extracting nested raw data into fields, so the
* writer must support converting the flat {@link Ext.data.Model} structure back into the original nested data
* format. Using the same mappings when available, the Writer will simply split each delimiter into a nested
* object in the output, which should exactly match the input format. For example, record data like this:
*
* my.nested.property: 'foo',
* my.nested.another: 'bar',
* my.somethingElse: 123
*
* should write out as...
*
* my: {
* nested: {
* property: 'foo',
* another: 'bar
* },
* somethingElse: 123
* }
*
* This behavior is governed by the {@link #expandData} config. By default, this option is `false` for
* compatibility reasons, and will output a flat structure matching the flat record format. Setting this config
* to `true` will enable the expanded mapping behavior as shown here. This method could also be overridden
* to provide an even more customized output data structure.
*/
getExpandedData: function(data) {
var dataLength = data.length,
i = 0,
item,
prop,
nameParts,
j,
tempObj,
toObject = function(name, value) {
var o = {};
o[name] = value;
return o;
};
for (; i < dataLength; i++) {
item = data[i];
for (prop in item) {
if (item.hasOwnProperty(prop)) {
// e.g. my.nested.property: 'foo'
nameParts = prop.split('.');
j = nameParts.length - 1;
if (j > 0) {
// Initially this will be the value 'foo'.
// Equivalent to rec['my.nested.property']
tempObj = item[prop];
for (; j > 0; j--) {
// Starting with the value above, we loop inside out, assigning the
// current object as the value for the parent name. Work all
// the way up until only the root name is left to assign.
tempObj = toObject(nameParts[j], tempObj);
}
// At this point we'll have all child properties rolled up into a single
// object like `{ nested: { property: 'foo' }}`. Now add the root name
// (e.g. 'my') to the record data if needed (do not overwrite existing):
item[nameParts[0]] = item[nameParts[0]] || {};
// Since there could be duplicate names at any level of the nesting be sure
// to merge rather than assign when setting the object as the value:
Ext.Object.merge(item[nameParts[0]], tempObj);
// Finally delete the original mapped property from the record
delete item[prop];
}
}
}
}
return data;
},
//inherit docs
writeRecords: function(request, data) {
var root = this.root;
if (this.expandData) {
data = this.getExpandedData(data);
}
if (this.allowSingle && data.length === 1) {
// convert to single object format
data = data[0];
}
if (this.encode) {
if (root) {
// sending as a param, need to encode
request.params[root] = Ext.encode(data);
} else {
for(var p in data){
request.params[p] = data[p];
}
}
} else {
// send as jsonData
request.jsonData = request.jsonData || {};
if (root) {
request.jsonData[root] = data;
} else {
request.jsonData = data;
}
}
return request;
}
});
Ext.data.writer.Json当设置了encode=true,但是没有设置root值的时候会:
//<debug> Ext.Error.raise('Must specify a root when using encode'); //</debug>
我将其所有的属性以表单参数形式进行传递。
for(var p in data){ request.params[p] = data[p]; }
当然用jsonData的形式传递给后台已经足够使用。这是只是另一种传递方式而已。切勿纠结!
相关推荐
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
2. **数据格式**:EXTJS支持多种数据格式,如JSON、XML、FORM等。POST请求中,数据可以通过`jsonData`或`params`属性传递,而GET请求通常通过URL的查询字符串传递参数。 三、EXTJS AJAX请求头设置 EXTJS允许自定义...
**ExtJS AJAX购物车详解** 在Web开发中,ExtJS是一个强大的JavaScript库,它提供了丰富的用户界面组件和数据管理功能,常用于构建复杂的桌面级应用。而Ajax技术则是实现页面无刷新更新的关键,使得用户在与网页交互...
在ExtJS中,Ajax(Asynchronous JavaScript and XML)提交是实现异步数据交互的核心功能,允许用户在不刷新整个页面的情况下与服务器进行数据交换。在本文中,我们将深入探讨ExtJS中的Ajax提交及其相关知识点。 1. ...
### extjs ajax框架中文使用手册 #### EXT简介 Ext JS是一个强大的、开源的JavaScript库,用于构建复杂的前端应用程序。它提供了丰富的用户界面组件、数据管理工具以及与服务器端交互的能力。Ext JS支持多种布局和...
### ExtJS 3.0 AJAX 同步请求详解 #### 一、引言 ExtJS 是一款基于 JavaScript 的开源框架,用于构建现代化的 Web 应用。它提供了丰富的 UI 组件以及强大的数据处理能力,使得开发者能够快速地开发出高质量的企业...
这里提到了EXTJS的四种异步提交方式,分别是基于EXT JS的Ajax方法、指定HTML表单的Ajax提交、EXT JS自定义表单的提交以及使用Action配置的提交。下面将详细解释这四种方式: 1. **基于EXT JS的Ajax方法**: 在`...
针对这个问题,首先需要进行两个方面的检查和确认,以确保form提交操作能够顺利进入success回调函数。 首先,必须确认提交后返回的json数据格式是正确的。在Extjs4中,表单提交经常是异步操作,数据会通过Ajax调用...
1. **组件系统**:ExtJS3.0的组件模型是其核心部分,包括窗口(Window)、表格(Grid)、面板(Panel)、按钮(Button)、表单(Form)等多种UI元素。每个组件都有自己的属性、事件和方法,可以灵活组合,构建出复杂...
EXTJS表单支持两种主要的提交方式:异步(Ajax)提交和传统(Standard)提交。异步提交是EXTJS常用的提交方式,通过Ajax发送JSON或URL编码的数据到服务器,无须页面刷新,能实现更好的用户体验。而传统提交则会创建...
1. **异步提交**:使用ExtJS的`form.submit`方法,可以实现Ajax方式的表单提交,无需刷新整个页面。 2. **处理响应**:Struts2将返回JSON或XML格式的结果,ExtJS可以解析这些响应,根据返回的状态(成功或失败)更新...
在Web开发中,有时我们需要动态地创建HTML...4. 使用JavaScript的`submit`方法或jQuery/ExtJS的Ajax函数提交表单,同时处理成功和失败的回调。 这个过程可以灵活适应各种应用场景,为用户提供了无刷新的数据提交体验。
在本文中,我们将深入探讨如何使用ExtJs构建一个完整的非Ajax提交的登录实例。ExtJs是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件和布局管理功能。以下是你需要了解的关键知识点: 1. *...
ajax同步请求一般下面这样: 代码如下: var conn = Ext.lib.Ajax.getConnectionObject().conn; conn.open(“POST”, ‘http://localhost:8080/struts2study/TreeDDGet?node=-1’,false); // 这里的conn对象其实就是 ...
extJS框架中封装了Ajax请求,提供了多种方式来实现异步提交数据,以下是四种常用的Ajax异步提交方式及其详细说明: 1. 使用Ext.Ajax.request方法提交数据 在extJS中,可以通过Ext.Ajax.request方法直接发起Ajax请求...
7. **Ajax提交超时**:`Extjs ajax提交超时.txt`可能涉及Ajax请求的超时设置和处理。在ExtJS中,可以设置请求的timeout属性来指定超时时间,并通过监听'exception'事件来处理超时情况。 8. **改变树的默认样式**:`...
ExtJS的`Ext.form.Panel`可以用来创建这样的面板,展示和处理用户的输入。 5. **保存与加载**:工作流设计需要有保存和加载的功能。ExtJS的Ajax接口和JSON数据模型可以帮助实现这个功能,将设计的流程图保存为JSON...
3. **ExtJs组件**:讲解常用的组件,如表格(Grid)、面板(Panel)、窗口(Window)、表单(Form)等,以及如何配置和使用它们。 4. **Ajax集成**:演示如何在ExtJs中实现Ajax通信,如Store与Proxy的配置,以及如何...