extJS 读取JSON文件
简述：
extJS 对JSON文件的展现
知识点：
1. JSON文件结构分析，以及基本写法
2. Ext.data.JsonStore()函数的使用
3.使用控件Ext.grid.GridPanel({...})
测试:
首先需要保证，json文件的正确性，可以到如 http://www.bejson.com/go.html?u=http://www.bejson.com/
验证json文件格式的正确性，直接粘贴上去verify一下
目录结构：
json文件和脚本代码:
jsonSrc/jsonTxt1.json,
{
"personInfoList": [
{
"id": 0,
"name": "A",
"age": 12
},
{
"id": 1,
"name": "B",
"age": 32
},
{
"id": 2,
"name": "C",
"age": 2
}
]
}
extJS3.3/test4.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test4.html</title>
<link rel="stylesheet" type="text/css" href="../ext-3.3.1/resources/css/ext-all.css"></link>
<script type="text/javascript" src="../ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.1/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myStore = new Ext.data.JsonStore({
url: '../jsonSrc/jsonTxt1.json',
root: 'personInfoList',
autoLoad: true,
fields: [{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}]
});
var columns = new Ext.grid.ColumnModel({
columns: [
{
header: 'ID',
dataIndex: 'id'
},
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'Age',
dataIndex: 'age'
}
]
});
var grid = new Ext.grid.GridPanel({
id: 'gridPanel',
title : 'Person Info Panel',
width : 250,
height : 250,
renderTo : 'personInfoListPanel',
store : myStore,
colModel : columns
});
});
</script>
</head>
<body>
<div id = "personInfoListPanel"></div>
</body>
</html>
输出：
