首先创建三个文件: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:'清华同方'} ]
本版积分规则 发表回复 回帖并转播 回帖后跳转到最后一页
QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.
下载期权论坛手机APP