1、JSP文件
3、服务器端返回的内容
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-2.2/ext-all-debug.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var propertyGrid = new Ext.grid.PropertyGrid({
title: 'Grid',
id: 'propertyGrid',
autoHeight: true,
width: 300,
renderTo: 'grid',
source: {} // 初始化数据源的配置对象
});
var propertyStore = new Ext.data.JsonStore({
autoLoad: true, //自动加载数据
url: '#', //从服务端请求数据
root: 'properties',
fields: ['id', 'name', 'age'],
listeners: {
load: {
fn: function(store, records, options){
// 获取propety grid组件
var propGrid = Ext.getCmp('propertyGrid');
// 保证grid是存在的
if (propGrid) {
// 获得property grid 的store数据
propGrid.setSource(store.getAt(0).data);
}
}
}
}
});
};
<body>
<div id="grid"></div>
</body>
</html>
3、服务器端返回的内容
{"properties":[
{
"id":"1",
"name":"qxp",
"age":"27"
}
]}