extjs 分页排序
in Web前端 on extjs, javascript web 前端 - Hits()
extjs GridPanel 使用jsonstore的load来加载远程数据:
Ext.onReady(function() {
var store = new Ext.data.JsonStore({
url : 'getRes.ax',//远程加载
root : 'rows',//告诉store,server返回json数据rows是本页的记录数组
totalProperty : 'count',//告诉store,server返回json数据中count表明总共记录数
remoteSort : true,//远程排序
fields : [{
name : 'id',
type : 'int'
}, {
name : 'actived',
type : 'bool'
}, {
name : 'selected',
type : 'bool'
}, {
name : 'value',
type : 'string'
}],
listeners : {
beforeload : function() {
//beforeloadr事件是添加参数的最好途径
//这里可以添加查询条件
// can add the filter params at here
// store.setBaseParam('selected:bool',true);
// store.setBaseParam('actived:bool',true);
store.setBaseParam('ps', Ext.encode({
'selected' : true,
'actived' : true
}));
//结合pagingtoolbar使用时,每次的分页排序,会向serversrvr传参数start[开始的行数],limit[需要的行数],sort[排序的字段],dir[排序方向]。
}
}
});
var PAGESIZE = 2;
var grid = new Ext.grid.GridPanel({
store : store,
bbar : new Ext.PagingToolbar({
store : store,
displayInfo : true,
pageSize : PAGESIZE
}),
columns : [{
header : 'actived',
sortable : true,
dataIndex : 'actived'
}, {
header : 'selected',
sortable : true,
dataIndex : 'selected'
}, {
header : 'value',
sortable : true,
dataIndex : 'value'
}],
columnLines : true,
viewConfig : {
forceFit : true,
emptyText : 'No data available'
},
stripeRows : true,
header : false
});
store.load({
params : {
start : 0,
limit : PAGESIZE
}
});
var vi = new Ext.Viewport({
layout : 'fit',
items : grid
});
vi.show();
});