首先创建三个文件:grid04.html、grid04.js、grid04.json
grid04.html内容如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>grid04.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" mce_href="extjs/resources/css/ext-all.css"/>
<mce:script language="javascript" type="text/javascript" src="extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script language="javascript" type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script>
<mce:script language="javascript" type="text/javascript" src="js/grid04.js" mce_src="js/grid04.js"></mce:script>
</head>
<body>
</body>
</html>
grid04.js的文件如下:
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'员工',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'计算机',dataIndex:'computer'}
]);
var proxy = new Ext.data.HttpProxy({url:'grid04.json'});
var record = Ext.data.Record.create([
{name:'id'},
{name:'name'},
{name:'computer'}
]);
var reader = new Ext.data.JsonReader({},record);
var store = new Ext.data.Store({
proxy:proxy,
reader:reader
});
store.load();
var grid = new Ext.grid.GridPanel({
title:'表格',
cm:cm,
store:store,
width:450,
height:300,
autoExpandColumn:2,
renderTo:Ext.getBody()
});
});
grid04.json文件的内容如下:
[
{id:1,name:'周尚武',computer:'联想'},
{id:2,name:'Leo',computer:'IBM'},
{id:3,name:'Jack',computer:'海尔'},
{id:4,name:'Mark',computer:'Lenovo'},
{id:5,name:'Kyf',computer:'神州'},
{id:6,name:'Hy',computer:'戴尔'},
{id:7,name:'李磊',computer:'惠普'},
{id:8,name:'彭彭',computer:'惠普'},
{id:9,name:'Xy',computer:'清华同方'}
]