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

最新推荐文章于 2022-05-06 16:30:56 发布

lvjian700

最新推荐文章于 2022-05-06 16:30:56 发布

阅读量248

点赞数

分类专栏： Ext JS 文章标签： EXT json JavaScript CSS XHTML ViewUI

Ext JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天被如何解析如下复杂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>