`
itManKid
  • 浏览: 2237 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

关于在Ext.data.Model中使用mapping无效

阅读更多

先定义一个简单的Model:

Ext.define("ProductModel", {
	extend: "Ext.data.Model",
	fields: [
		{
			name: "product",
//			mapping: "p.name"  // 这种写法也可以,使用下面的function是为了调试
			mapping: function(data) {
//				alert(data.p.name);
				return data.p.name;
			}
		},
		{name: "sl", type: "int"}
	]
});

 上面的model很基础,没什么可说的。再创建一个Store:

var productStore = Ext.create("Ext.data.Store", {
	storeId: "productStore",
	model: "ProductModel",
	data: [{
		p: {
			name: "product1",
			brand: "b1"
		},
		sl: 11
	}, {
		p: {
			name: "product2",
			brand: "b2"
		},
		sl: 22
	}]
});

 最后是grid panel:

var productGP = Ext.create("Ext.grid.Panel", {
	border: false,
	store: productStore,
	columnLines: true,
	columns: {
		items: [
		    {xtype: "rownumberer", resizable: true},
		    {text: "产品", dataIndex: "product", flex: 1},
		    {text: "数量", dataIndex: "sl"}
		]
	}
});

 上述代码的本意是希望在grid panel的产品列中显示产品的名称,然而实际结果却是[Object Object]。经过调试发现,fields里面的mapping根本没起作用,这让我百思不得其解,求助google也没找到合适的答案。

正当心灰意冷时,我在extjs的api文档中发现端倪。首先请注意到我的store中使用了inline data,而在store的api文档中,Inline data小节有如下描述:

Loading inline data using the method above is great if the data is in the correct format already (e.g. it doesn't need to be processed by a reader). If your inline data requires processing to decode the data structure, use a MemoryProxy instead (see the MemoryProxy docs for an example).

 就是说,inline data是不会经过任何加工处理的,如果要对数据进行加工,可考虑使用MemoryProxy。

 好的,对上述代码进行改造,为store添加一个MemoryProxy:

var productStore = Ext.create("Ext.data.Store", {
	storeId: "productStore",
	model: "ProductModel",
	data: [{
		p: {
			name: "product1",
			brand: "b1"
		},
		sl: 11
	}, {
		p: {
			name: "product2",
			brand: "b2"
		},
		sl: 22
	}],
        proxy: {
                type: "memory",
                reader: {
                        type: "json"
                }
        }
});

 这样一来,mapping就起作用了,gridpanel也如我们所预期的那样显示了产品名称。

但是实际应用中,数据一般都是通过向服务器请求获得的,而不是这样写死在代码中。我个人习惯定义一个方法,在方法中发送一个Ext.Ajax.request请求,该方法接受一个object参数,该参数将作为Ext.Ajax.request请求的params。需要加载/更新数据的时候调用这个方法。为了方便,在此我只贴出Ext.Ajax.request的代码,并且也只给出了success情况下的处理:

Ext.Ajax.request({
	url: getContextPath() + "/test/extMappingTest",  // 你的请求地址
        params: param,    // 请求参数
	reader: "json",
	actionMethods: {
		read: "POST"
	},
	success: function(response) {
		var resp = Ext.JSON.decode(response.responseText);    // 服务器返回的是json格式的字符串,这里将其解析为一个Object
		productStore.removeAll();    // 清除原有数据
		productStore.loadData(resp);
	}
});

上述代码的实际运行结果并没有达到我们的预期,gridpanel没有正确显示出产品名称,只显示出数量。通过调试可以发现,和一开始使用Inline data一样,mapping根本没起作用。不过既然我们已经有了经验,知道必须通过proxy加载数据才会经过mapping的处理,那我们就手动调用proxy好了。将Ext.Ajax.request修改如下:

Ext.Ajax.request({
	url: getContextPath() + "/test/extMappingTest",  // 你的请求地址
        params: param,    // 请求参数
	reader: "json",
	actionMethods: {
		read: "POST"
	},
	success: function(response) {
		var resp = Ext.JSON.decode(response.responseText);    // 服务器返回的是json格式的字符串,这里将其解析为一个Object
		productStore.removeAll();    // 清除原有数据
		var rs = productStore.getProxy().getReader().readRecords(resp);	// 如想Model中fields里的mapping生效,必须通过proxy处理数据
		productStore.loadRecords(rs.records);
	}
});

 至此,大功告成。

分享到:
评论

相关推荐

    Ext.data.Store 读取XML属性值

    在处理数据时,`Ext.data.Store`是一个至关重要的组件,它用于存储和管理数据,可以与各种数据源进行交互。当我们需要从XML文档中提取数据并加载到`Store`时,就涉及到`Ext.data.reader.Xml`。这篇博客文章《Ext....

    ExtJs中处理后台传过来的date对象显示到页面上

    在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型...

    extjs4 record mapping参数解释

    在本篇文章中,我们将深入探讨 ExtJS 4 中 `record mapping` 参数的相关概念与使用方法。这是一项重要的功能,能够帮助开发者更好地管理数据模型与数据交互。通过理解这些概念,可以更加高效地开发出功能丰富的应用...

    Extjs Grid 用法 pdf版

    本文将详细介绍 Extjs 中 Grid 组件的基本用法,包括如何创建 Grid、如何配置列模型 (Column Model)、如何处理不同格式的数据源以及如何在 Grid 中添加 CheckBox。 #### 二、Grid 组件基础 ##### 2.1 构建基本的 ...

    extjs4.0学习笔记

    10. **数据模型(Ext.data.Model)**:定义数据模型,`fields`定义了数据结构,`idProperty`指定主键字段,`Ext.data.Field`用于定义字段的属性,如`name`, `type`, `defaultValue` 和 `mapping`。 11. **数据源(Ext....

    图书管理系统(struts+hibernate+spring+ext).zip

    在图书管理系统中,Hibernate用于映射数据库实体对象,通过ORM(Object-Relational Mapping)技术,实现了Java对象与数据库表之间的自动转换,使得开发者可以专注于业务逻辑,而无需过多关注SQL语句的编写。...

    ext json struts 完整无错源码

    深入研究这些源码,你可以了解到如何配置 Struts 的 XML 配置文件,如何编写 Action 类,以及如何在 EXT 中定义组件和数据源,以及如何利用 EXT Direct 实现前后端通信。 总结来说,"ext json struts 完整无错源码...

    JavaScript的ExtJS框架中表格的编写教程

    可以使用`Ext.data.MemoryProxy`来获取内存中的数据,或使用`Ext.data.ScriptTagProxy`来从远程URL获取数据。 ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), ...

    Extjs结合Struts版的简单书籍管理系统

    6. **Ajax通信**:ExtJS使用Ajax技术实现异步请求,通过Ext.Ajax或Ext.data.proxy.Ajax进行后台数据的获取和提交,提高了用户体验。 7. **权限与安全**:对于实际的管理系统,权限控制和数据安全非常重要。项目可能...

    extjs 3.2.1 项目

    在本文中,我们将深入探讨ExtJS 3.2.1的主要特性、组件和其在项目开发中的应用。 1. **主要特性**: - **组件化**:ExtJS 3.2.1的核心是其强大的组件模型,允许开发者将UI拆分为独立、可重用的部分。 - **数据...

    EXTJS小系统

    - 数据库连接:EXT JS可以通过Ajax请求或者使用ORM(Object-Relational Mapping)工具与后端数据库进行交互,如Sencha Direct或Ext.data.Store。 3. 前后端交互: - JSON(JavaScript Object Notation)是前后端...

    struts 1.2 文件上传与下载.txt

    为了使用FileUpload组件,首先需要在项目中添加相应的依赖。这通常可以通过配置项目的build路径或者在pom.xml文件中添加Maven依赖来完成。 #### 2. 创建表单 创建一个HTML表单,用于用户选择并提交文件。表单需要...

    Struts的Ext增删改查应用范例

    在Struts中,通常使用Tiles框架来组织和管理多个JSP页面,实现页面的复用和组合。例如,可以创建一个`success.jsp`用于显示操作成功后的信息。 6. **DAO(Data Access Object)**: DAO层是与数据库交互的部分,...

    Spring+springMVC+hibernate做的一个导入Excel

    在IT行业中,Spring、SpringMVC和Hibernate是Java Web开发中的三大核心框架,它们共同构建了一个强大且灵活的后端架构。本项目是基于这些框架实现的一个功能,即通过前端界面上传Excel文件并进行数据导入。以下是...

    ap6212a0_a33_sc3817r_服务器验证通过_bt已经通了_wifi需要修改配置_需要再次验证_20170626_1549.7z

    PRODUCT_MODEL := QUAD-CORE A33 y3 PRODUCT_MANUFACTURER := softwinner #include device/softwinner/polaris-common/prebuild/google/products/gms_base.mk 4、 R:\wyb\ap6212a0_a33_sc3817r\android\device\...

    php thinkphp

    在实际项目中,可以利用 ThinkPHP 的 ORM(Object-Relational Mapping)功能,方便地处理复杂的数据库操作,如关联查询、事务处理等。 **总结** 通过上述介绍,我们可以看出 ThinkPHP 框架在 PHP 开发中的强大之处...

    ap6212a0_a33_sc3817r_神舟验证版本_借用nvram_ap6210这个配置文件_20170626_1834没有外层目录.7z

    PRODUCT_MODEL := QUAD-CORE A33 y3 PRODUCT_MANUFACTURER := softwinner #include device/softwinner/polaris-common/prebuild/google/products/gms_base.mk 4、 R:\wyb\ap6212a0_a33_sc3817r\android\device\...

Global site tag (gtag.js) - Google Analytics