`
witcheryne
  • 浏览: 1100350 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

使用Ext JS的JsonReader读取复杂json对象

阅读更多

今天被如何解析如下复杂json对象给难住了.. 翻了半天文档也没找出如何在JsonReader中读取json对象的方法(可能也是因为自己E文水平有限没正确理解文档中的意思。)

/*json代码*/ { "loginName":"lvjian0", "password":"1230", "type":{ "typeId":1, "typeName":"近卫" } }

经过一翻baidu+google终于找到了解决方案:

使用convert:function(v){} 对复杂对象进行处理:

 

具体代码如下所示:

/*我的ext-json-grid.js代码*/
Ext.onReady(function() {

	var proxy = new Ext.data.HttpProxy( {
		url : 'grid.do?operator=read'
	});
	// 定义reader
		var reader = new Ext.data.JsonReader( {
			id : 'loginName'
		}, [ {
			name : 'loginName'
		}, {
			name : 'password'
		}, {
			name : 'type', convert : function(v) {
				return v.typeName;
   			}
		}])
		// 构建Store
		var store = new Ext.data.Store( {
			proxy : proxy,
			reader : reader
		});
		// 载入
		store.load();

		// create the grid
		var grid = new Ext.grid.GridPanel( {
			store : store,
			columns : [ {
				header : "Login Name",
				width : 110,
				dataIndex : 'loginName',
				sortable : true
			}, {
				header : "Password",
				width : 120,
				dataIndex : 'password',
				sortable : true
			}, {
				header : "Type",
				width : 120,
				dataIndex : 'type',
				sortable : true
			}],
			renderTo : 'example-grid',
			width : 540,
			height : 200
		});

	});

 html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>register.html</title>
    <link href="scripts/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
	<script src="scripts/ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="scripts/ext/ext-all.js" type="text/javascript"></script>
    <script src="scripts/ext-json-grid.js" type="text/javascript"></script>
  </head>  
  <body>
  	<div id="example-grid">
    </div>
  </body>
</html>

 

 

分享到:
评论
2 楼 witcheryne 2010-11-16  
caoxiping 写道
function(v) {  
                return v.typeName;  
}
看不懂,能写明白点吗

对应json来看...
{ 
    "loginName":"lvjian0", 
    "password":"1230", 
    "type":{
        "typeId":1, 
        "typeName":"近卫" 
} }  
1 楼 caoxiping 2010-11-03  
function(v) {  
                return v.typeName;  
}
看不懂,能写明白点吗
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    使用Json传值的示例

    通过循环构建JSON数组,然后将其写入到响应流中,以便JavaScript端能够读取。 #### 5. **总结** 通过以上分析,我们了解了在JSP中使用JSON进行数据传输的基本流程。从JavaScript端请求数据,到JSP端处理并返回JSON...

    Ext 学习总结 pdf版

    - **Ext.data.JsonReader篇**:`Ext.data.JsonReader`是专门用于解析JSON数据的类,它能够将JSON字符串转换为JavaScript对象,便于进一步处理。 - **Ext.data.HttpProxy篇**:这部分介绍了`Ext.data.HttpProxy`,它...

    精通JS脚本之ExtJS框架.part1.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ext grid带分页(服务器端)

    - `reader`:设置数据读取器,如`Ext.data.JsonReader`,定义字段映射以便解析JSON响应。 3. **JSP与服务器端处理**: - JSP页面是Java服务器端脚本,负责接收EXT Grid的请求,处理数据库查询并返回JSON响应。 -...

    Ext.data.Store的基本用法

    还可以通过`getSortState`方法获取当前的排序状态,该方法返回一个包含`field`和`direction`的JSON对象。 #### 五、后台排序 如果需要在服务器端进行数据排序,可以设置`remoteSort`属性为`true`。这样做会使得`...

    EXT核心API详解.doc

    EXT核心API详解主要涵盖了一系列与EXT.js库相关的类和对象,EXT.js是一个强大的JavaScript UI框架,用于构建富客户端Web应用程序。以下是对各个类的详细解释: 1. **Ext类**:EXT库的基础类,提供了许多实用的方法...

    精通JS脚本之ExtJS框架.part2.rar

    本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...

    ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

    `JsonReader`是ExtJs中的数据读取器,它解析JSON格式的数据,并将其转化为可以供GridPanel使用的Record对象。关键配置包括: 1. `id`:指定数据行对象中包含数据行ID的属性名。 2. `totalProperty`:用于获取数据集...

    Ext 开发指南 学习资料

    3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从...

    etjs核心api详解免费范文精选.docx

    文档标题和描述中提到的"etjs核心API详解"很可能是指EXT JS,这是一个基于JavaScript的富客户端应用开发框架,主要用于构建桌面级Web应用程序。EXT JS提供了丰富的组件库和数据管理功能,其核心API是框架的核心部分...

    extjs帮助文档

    - **概述**:Ext.data.JsonReader类用于解析JSON对象格式的数据。 - **常用方法**: - `new Ext.data.JsonReader(readerConfig, recordType)`:创建一个新的JSON读取器实例。 - `Ext.data.JsonReader.read...

    extJs 2.1学习笔记

    13. **extJs 2.0学习笔记**:这部分内容可能包含与2.1版本相关的进阶主题,如Ajax的使用、Ext.data的相关知识、Ext.Panel的深入研究、事件注册、组件总论、Element API的总结以及DomHelper和ext.js的使用方法。...

    Ext与后台数据库交互

    通常情况下,我们会根据返回数据的格式选择合适的读取器,比如对于JSON格式的数据,可以使用`JsonReader`。 Store还支持内联数据,即可以通过配置`data`选项直接定义数据,这在某些情况下非常方便。例如: ```...

    关于EXT分页,分组,排序

    接下来定义了一个 `JsonReader` 对象,该对象指定了JSON数据的结构,包括数据数组的名称、总记录数的属性名等。这里还设置了一个属性 `remoteSort` 为 `true`,表示排序操作将在服务器端完成。 3. **创建 Store**...

    extjs前台分页插件PagingStore!

    4. **配置Reader**:设置数据读取器(Reader),如`Ext.data.JsonReader`,定义如何解析服务器返回的JSON数据。 5. **绑定到GridPanel**:将PagingStore与GridPanel关联,GridPanel会根据PagingStore的数据自动渲染...

    EXTJS___API详解

    2. **Array 类**:EXTJS扩展了JavaScript的数组对象,添加了一些实用的方法,如Ext.Array.each()用于遍历数组,Ext.Array.indexOf()查找元素的索引。 3. **Number 类**:增强了JavaScript的数字处理,提供了如Ext....

    extjs帮助文档pdf版

    - `Ext.data.JsonReader.read(response)`: 读取JSON数据。 #### 34. Ext.data.XmlReader 类 (P.27) - **概述**:读取XML格式的数据。 - **常用方法**: - `Ext.data.XmlReader.read(response)`: 读取XML数据。 ##...

    extjs gridpanel例子和简单应用

    - `JsonReader`是`Ext.data.Reader`的一个子类,用于解析从服务器返回的JSON格式数据。它可以将JSON数据转换为`Record`对象数组,方便`GridPanel`进行数据绑定。 3. **Store** - `Store`是ExtJS中用于存储和管理...

Global site tag (gtag.js) - Google Analytics