(一)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',//一種顯示方式,最簡(jiǎn)定義.
{name: 'forumid'},//type:'int'},//二種顯示方式,可定義其它選項(xiàng)
{name: 'forumtitle'}]//,mapping : 'lastpost',type:'date',dateFormat : 'timestamp'}]
);
// 表格數(shù)據(jù),proxy:從哪里獲得數(shù)據(jù)，reader:如何解析這個(gè)數(shù)據(jù).
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 , //行數(shù)據(jù)對(duì)象(行數(shù)據(jù)+記錄總數(shù))
// Object recordType ) //列數(shù)據(jù)對(duì)象
reader : new Ext.data.JsonReader({
root:'topics', //數(shù)組類型的行對(duì)象
totalProperty:'totalCount' //記錄總數(shù)(可選)
},fields
),
remoteSort : true
});
// create the data store
// var ds = new Ext.data.SimpleStore({
// fields: [
// mapping只能賦值數(shù)字.錯(cuò)誤代碼:{name: 'id',mapping:'id'},
// {name: 'id',mapping:0},
// {name: 'name',mapping:1},
// {name: 'descn',mapping:2}
// ]
// });
// ds.loadData(myData);
//表格列頭的定義,以下定義四列.
//每列的header顯示GRID這列的名稱，dataIndex 與 json定義的鍵相對(duì)應(yīng)(可選,只要JsonReader定義時(shí)確定就行了).
//此項(xiàng)定義GRID 與 JSON 列數(shù)據(jù)的關(guān)聯(lián).
var colModel = new Ext.grid.ColumnModel([
{header:'編號(hào)',dataIndex:'title'},
{header:'名稱',dataIndex:'forumid'},
{header:'descn',sortable: true,dataIndex:'forumtitle'}
]);
// 裝配數(shù)據(jù).
var grid = new Ext.grid.GridPanel({
el : 'MyPageGrid', // 渲染位置的id，對(duì)應(yīng)的名字是el.
store : ds,
cm : colModel,
// autoExpandColumn: 'OrderID', //引用已不存在的變量使剛才數(shù)據(jù)無法顯示.
// renderTo: document.body,
height : 350,
width : 600,
title : 'Array Grid', // 表格標(biāo)題.
loadMask : {
msg : '正在加載數(shù)據(jù)，請(qǐng)稍侯……'
}, // 數(shù)據(jù)讀入等待顯示界面.
bbar : new Ext.PagingToolbar({ // 分頁(yè)欄定義.
pageSize : 20,
store : ds,
displayInfo : true,
displayMsg : '當(dāng)前顯示 {0} - {1}條記錄 /共 {2}條記錄',
emptyMsg : "無顯示數(shù)據(jù)"
})
});
// 顯示表格.
grid.render();
//讀入數(shù)據(jù)信息,放置位置決定其何時(shí)加載.如最后:表格顯示之后,在加載(必選項(xiàng)).
ds.load({
// 從第0個(gè)數(shù)據(jù)開始.每頁(yè)9個(gè).
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
紫蝶∏飛揚(yáng)↗ 閱讀(3350)
評(píng)論(2) 編輯 收藏 所屬分類:
EXTJS