您的位置：首页 > Web前端 > JavaScript

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

2009-07-01 19:31 423 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航