(一)JS文件: extjs.js
Ext.onReady(function() {
var fields=Ext.data.Record.create(
[
// 'title',
// {name : 'replycount',
// type : 'int'
// },
// {
// name : 'lastpost',
// mapping : 'lastpost',
// type : 'date',
// dateFormat : 'timestamp'
// }
// ]
//'title','forumid','forumtitle']
'title',//一种显示方式,最简定义.
{name: 'forumid'},//type:'int'},//二种显示方式,可定义其它选项
{name: 'forumtitle'}]//,mapping : 'lastpost',type:'date',dateFormat : 'timestamp'}]
);
// 表格数据,proxy:从哪里获得数据，reader:如何解析这个数据.
var ds = new Ext.data.Store({
// proxy : new Ext.data.HttpProxy( {url:'extjs-index.jsp'} ),
proxy : new Ext.data.ScriptTagProxy({
url : 'http://extjs.com/forum/topics-browse-remote.php'
}),
//JsonReader( Object meta , //行数据对象(行数据+记录总数)
// Object recordType ) //列数据对象
reader : new Ext.data.JsonReader({
root:'topics', //数组类型的行对象
totalProperty:'totalCount' //记录总数(可选)
},fields
),
remoteSort : true
});
// create the data store
// var ds = new Ext.data.SimpleStore({
// fields: [
// mapping只能赋值数字.错误代码:{name: 'id',mapping:'id'},
// {name: 'id',mapping:0},
// {name: 'name',mapping:1},
// {name: 'descn',mapping:2}
// ]
// });
// ds.loadData(myData);
//表格列头的定义,以下定义四列.
//每列的header显示GRID这列的名称，dataIndex 与 json定义的键相对应(可选,只要JsonReader定义时确定就行了).
//此项定义GRID 与 JSON 列数据的关联.
var colModel = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'title'},
{header:'名称',dataIndex:'forumid'},
{header:'descn',sortable: true,dataIndex:'forumtitle'}
]);
// 装配数据.
var grid = new Ext.grid.GridPanel({
el : 'MyPageGrid', // 渲染位置的id，对应的名字是el.
store : ds,
cm : colModel,
// autoExpandColumn: 'OrderID', //引用已不存在的变量使刚才数据无法显示.
// renderTo: document.body,
height : 350,
width : 600,
title : 'Array Grid', // 表格标题.
loadMask : {
msg : '正在加载数据，请稍侯……'
}, // 数据读入等待显示界面.
bbar : new Ext.PagingToolbar({ // 分页栏定义.
pageSize : 20,
store : ds,
displayInfo : true,
displayMsg : '当前显示 {0} - {1}条记录 /共 {2}条记录',
emptyMsg : "无显示数据"
})
});
// 显示表格.
grid.render();
//读入数据信息,放置位置决定其何时加载.如最后:表格显示之后,在加载(必选项).
ds.load({
// 从第0个数据开始.每页9个.
params : {
start : 0,
limit : 9
}
});
});
(二)JSP文件: extjs.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSF 'extjs.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="extjs.js"></script>
</head>
<body>
<div id="MyPageGrid"></div>
</body>
</html>
posted on 2008-06-04 15:42
紫蝶∏飛揚↗ 阅读(3344)
评论(2) 编辑 收藏 所属分类:
EXTJS