Ext.onReady(function(){ var cm=new Ext.grid.ColumnModel([{ header:"id",// 列名 dataIndex:"id" // 与fields一一对应 },{ header:"姓名", dataIndex:"name" // 与fields一一对应 },{ header:"Email", dataIndex:"email" // 与fields一一对应 },{ header:"性别", dataIndex:"sex" // 与fields一一对应 },{ header:"年龄", dataIndex:"age" // 与fields一一对应 }]); var fields=["id","name","email","sex","age"];// 字段的描述,指列 var data=[["1","lang","lijun@126.com","0","20"], ["2","lang","lijun@126.com","0","20"], ["3","lang","lijun@126.com","0","20"], ["4","lang","lijun@126.com","0","20"], ["5","lang","lijun@126.com","0","20"]];// 行,与field一一匹配,本地数据取值方式 // store表示数据存储器 var store=new Ext.data.SimpleStore({ fields:fields, data:data }) var grid=new Ext.grid.GridPanel({ title:'gridpanel', cm:cm, store:store, autoHeight:true }) grid.render(Ext.getBody()); })
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
request.setAttribute("base", request.getContextPath());
%>
<html>
<head>
<title>gridpanel数据展示</title>
<link rel="stylesheet" type="text/css"
href="${base}/script/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="${base}/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
<script type="text/javascript" src="${base}/user/grid_simple.js"></script>
</head>
<body>
</body>
</html>