先定义一个简单的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小节有如下描述:
就是说,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文档中提取数据并加载到`Store`时,就涉及到`Ext.data.reader.Xml`。这篇博客文章《Ext....
在ExtJs中处理后台传递的Date对象并将其正确地显示在页面上,通常涉及到数据模型(Model)、存储(Store)、列模型(ColumnModel)以及渲染器(Renderer)的配置。以下是一个详细的步骤说明: 1. **创建数据模型...
在本篇文章中,我们将深入探讨 ExtJS 4 中 `record mapping` 参数的相关概念与使用方法。这是一项重要的功能,能够帮助开发者更好地管理数据模型与数据交互。通过理解这些概念,可以更加高效地开发出功能丰富的应用...
本文将详细介绍 Extjs 中 Grid 组件的基本用法,包括如何创建 Grid、如何配置列模型 (Column Model)、如何处理不同格式的数据源以及如何在 Grid 中添加 CheckBox。 #### 二、Grid 组件基础 ##### 2.1 构建基本的 ...
10. **数据模型(Ext.data.Model)**:定义数据模型,`fields`定义了数据结构,`idProperty`指定主键字段,`Ext.data.Field`用于定义字段的属性,如`name`, `type`, `defaultValue` 和 `mapping`。 11. **数据源(Ext....
在图书管理系统中,Hibernate用于映射数据库实体对象,通过ORM(Object-Relational Mapping)技术,实现了Java对象与数据库表之间的自动转换,使得开发者可以专注于业务逻辑,而无需过多关注SQL语句的编写。...
深入研究这些源码,你可以了解到如何配置 Struts 的 XML 配置文件,如何编写 Action 类,以及如何在 EXT 中定义组件和数据源,以及如何利用 EXT Direct 实现前后端通信。 总结来说,"ext json struts 完整无错源码...
可以使用`Ext.data.MemoryProxy`来获取内存中的数据,或使用`Ext.data.ScriptTagProxy`来从远程URL获取数据。 ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), ...
6. **Ajax通信**:ExtJS使用Ajax技术实现异步请求,通过Ext.Ajax或Ext.data.proxy.Ajax进行后台数据的获取和提交,提高了用户体验。 7. **权限与安全**:对于实际的管理系统,权限控制和数据安全非常重要。项目可能...
在本文中,我们将深入探讨ExtJS 3.2.1的主要特性、组件和其在项目开发中的应用。 1. **主要特性**: - **组件化**:ExtJS 3.2.1的核心是其强大的组件模型,允许开发者将UI拆分为独立、可重用的部分。 - **数据...
- 数据库连接:EXT JS可以通过Ajax请求或者使用ORM(Object-Relational Mapping)工具与后端数据库进行交互,如Sencha Direct或Ext.data.Store。 3. 前后端交互: - JSON(JavaScript Object Notation)是前后端...
为了使用FileUpload组件,首先需要在项目中添加相应的依赖。这通常可以通过配置项目的build路径或者在pom.xml文件中添加Maven依赖来完成。 #### 2. 创建表单 创建一个HTML表单,用于用户选择并提交文件。表单需要...
在Struts中,通常使用Tiles框架来组织和管理多个JSP页面,实现页面的复用和组合。例如,可以创建一个`success.jsp`用于显示操作成功后的信息。 6. **DAO(Data Access Object)**: DAO层是与数据库交互的部分,...
在IT行业中,Spring、SpringMVC和Hibernate是Java Web开发中的三大核心框架,它们共同构建了一个强大且灵活的后端架构。本项目是基于这些框架实现的一个功能,即通过前端界面上传Excel文件并进行数据导入。以下是...
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\...
在实际项目中,可以利用 ThinkPHP 的 ORM(Object-Relational Mapping)功能,方便地处理复杂的数据库操作,如关联查询、事务处理等。 **总结** 通过上述介绍,我们可以看出 ThinkPHP 框架在 PHP 开发中的强大之处...
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\...