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>