爲表格添加分頁工具條
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<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="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自動顯示行號
sm,//複選框
{hearder:'編號',dataIndex:'id',sortable:true},//每一行對應表格的一列
{header:'姓名',dataIndex:'name'},
{header:'性別',dataIndex:'sex',renderer:rendererSex},
{header:'描述',dataIndex:'descn'},
{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期類型需要特別注意
]);
function rendererSex(value){
if(value == 'male'){
return "<span style = 'color:red;font-weight:bold'>男</span>";
}
else{
return "<span style = 'color:green;font-weight:bold'>女</span>";
}
}
var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
['2','卡卡','female','descn','1990-01-15T03:34:18'],
['3','c羅','male','descn','1990-01-15T03:34:18'],
['4','梅西','female','descn','1990-01-15T03:34:18'],
['5','比利亞','male','descn','1990-01-15T03:34:18'],
['6','卡卡','female','descn','1990-01-15T03:34:18'],
['7','c羅','male','descn','1990-01-15T03:34:18'],
['8','梅西','female','descn','1990-01-15T03:34:18'],
['9','比利亞','male','descn','1990-01-15T03:34:18'],
['10','卡卡','female','descn','1990-01-15T03:34:18'],
];
//var cm = new Ext.grid.ColumModel(...) 負責創建表格的列信息
//header:首部顯示文本
//dataIndex:列對應的記錄集字段
//sortable:是否可排序
//renderer:渲染函數
//format列格式化信息
/*數據存儲器Store*/
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'},
{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//顯示日期類型數據,同時還需要在cm裏進行配置
]),
sortInfo:{field:"name",direction:"ASC"}//設置默認排序方式
}
);
var bbar = new Ext.PagingToolbar({
pageSize:10,//每頁顯示幾條數據
store:store,//數據
displayInfo:true,//是否顯示數據信息
displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',//只有displayInfo:true時纔有效,用來顯示有數據的提示信息。
emptyMsg:"沒有記錄",//沒有數據顯示的信息
});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',//指示表格渲染到什麼地方去
store:store,//數據存儲器
cm:cm,//列定義信息
sm:sm,//複選框
autoHeight:true,
bbar:bbar,
});
//如果配置了分頁工具條,store.load()必須在構造表格以後執行
store.load();
}
);
</script>
</head>
<body>
<div id = "grid">
</div>
</body>
</html>