(一)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
紫蝶∏飛揚↗ 閱讀(3350)
評論(2) 編輯 收藏 所屬分類:
EXTJS