GridPanel分頁
EXT數據結構
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();//顯示選擇框
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//顯示行號
sm,//顯示選擇框
{
header : "姓名",// 列頭文字說明
width : 80,
dataIndex : "Name",// 記錄結構中的name屬性值
tooltip : "這是你的姓名"// 懸停提示
}, {
header : "性別",
width : 40,
dataIndex : "Sex",
align : "center",
renderer : function(v) {
if (v == "男") {
return "<img src='imgs/boy.gif'>";
} else {
return "<img src='imgs/girl.gif'>";
}
}
}, {
header : "生日",
width : 150,
format : "Y-m-d",
dataIndex : "Birthday",
renderer : Ext.util.Format.dateRenderer("Y-m-d")
}, {
header : "學歷",
width : 80,
dataIndex : "Education",
align : "center"
}, {
id : "memo",
header : "備註",
dataIndex : "Memo"
}, {
header : "操作",
width : 150,
dataIndex : "Operation",
menuDisabled : true,
renderer : function(v) {
return "<sapn style='margin-right:10px'><a href='#'>修改</a></span>"
+ "<span><a href='#'>刪除</a></span>";
}
}
]);
// 給每個列添加數據
var data = [{
name : "學生A",
sex : "男",
birthday : Date.parseDate("1987-12-08", "Y-m-d"),
edu : "本科",
memo : "無備註"
}, {
name : "學生B",
sex : "女",
birthday : Date.parseDate("1974-04-23", "Y-m-d"),
edu : "大專",
memo : "漂亮MM"
}, {
name : "學生C",
sex : "女",
birthday : Date.parseDate("1978-05-17", "Y-m-d"),
edu : "碩士",
memo : "無備註"
}, {
name : "學生D",
sex : "女",
birthday : Date.parseDate("1988-07-14", "Y-m-d"),
edu : "碩士",
memo : "無備註"
}];
// proxy
var proxy = new Ext.data.MemoryProxy(data);
// 定義記錄結果
var Human = Ext.data.Record.create([{
name : "Name",
type : "string",
mapping : "name"
}, {
name : "Sex",
type : "string",
mapping : "sex"
}, {
name : "Birthday",
type : "string",
mapping : "birthday"
}, {
name : "Education",
type : "string",
mapping : "edu"
}, {
name : "Memo",
type : "string",
mapping : "memo"
}, {
name : "Operation",
type : "string"
// mapping:"oper"
}]);
var reader = new Ext.data.JsonReader({}, Human);
//提供數據源
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load();
var grid = new Ext.grid.GridPanel({
title:"學生信息",
width:700,
autoHeight:true,
cm:cm,
sm:sm,
store:store,
renderTo:"a",
autoExpandColumn:"memo",//自動伸展
buttonAlign:"center",
buttons:[{
text:"第一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
rsm.selectFirstRow();
}
},{
text:"上一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到選擇行的模型
if(!rsm.hasPrevious()){
Ext.Msg.alert("警告","已到達第一行");
}else{
rsm.selectPrevious();
}
}
},{
text:"下一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
if(!rsm.hasNext()){
Ext.Msg.alert("警告","已到達最後一行");
}else{
rsm.selectNext()
}
}
},{
text:"最後一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
rsm.selectLastRow();
}
},{
text:"全選",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
rsm.selectAll();
}
},{
text:"全不選",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
rsm.deselectRange(0,grid.getView().getRows().length - 1);
}
},{
text:"反選",
handler:function(){
var rsm = grid.getSelectionModel();//得到行選擇模型
for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i,true);//必須保留原來的，否則效果無法是實現
}
}
}
}]
});
})