今晚,說不出的高興,折磨了我好久的Grid終于可以按搜索條件分頁了,激動啊....
function listStudent() {
function renderSex(value) {
if (value == 'boy') {
return "男";
} else {
return "女";
}
}
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm, {
header : '編號',
dataIndex : 'id',
width : 80,
sortable : true
}, {
header : '名稱',
dataIndex : 'name',
width : 80
}, {
header : '性別',
dataIndex : 'sex',
renderer : renderSex
}, {
header : '日期',
dataIndex : 'date',
width : 100,
renderer : Ext.util.Format.dateRenderer('Y-m-d')
}, {
header : '描述',
dataIndex : 'descn',
width : 200
}]);
var ds = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/ext/list.jspa'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'total',
root : 'persons'
}, [{
name : 'id'
}, {
name : 'name'
}, {
name : 'sex'
}, {
name : 'date',
type : 'date',
dateFormat : 'Y-m-dTH:i:s'
}, {
name : 'descn'
}])
});
ds.load({
params : {
start : 0,
limit : 18
}
});
ds.on('beforeload',function(){
Ext.apply(
this.baseParams,
{
title:Ext.get('title').dom.value
});
});
var grid = new Ext.grid.GridPanel({
el : 'grid',
ds : ds,
cm : cm,
sm : sm,
border : false,
autoExpandColumn : 5,
tbar : ['關鍵字查詢：', {
xtype : 'textfield',
width : 200,
id : 'title',
name : 'title'
}, {
text : '搜索',
iconCls : 'search',
handler : function() {
ds.load({
params : {
start : 0,
limit : 18,
title : Ext.get('title').dom.value
}
})
}
}, {
xtype : 'tbseparator'
}, {
text : '發布',
iconCls : 'edit'
}, {
xtype : 'tbseparator'
}, {
text : '查看',
iconCls : 'copy'
}, {
xtype : 'tbseparator'
}, {
text : '刷新',
iconCls : 'refresh'
}, {
xtype : 'tbseparator'
}, {
text : '回復',
iconCls : 'post'
}, {
xtype : 'tbseparator'
}, {
text : '刪除',
iconCls : 'del'
}],
bbar : new Ext.PagingToolbar({
pageSize : 18,
store : ds,
displayInfo : true,
displayMsg : '第{0} 到 {1} 條數據 共{2}條',
emptyMsg : '沒有數據'
})
});
grid.render();
}
Ext.onReady(listStudent);