使用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>