EXTJs 实现表格数据显示-----JSON

首先创建三个文件：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:'清华同方'} ]