Question

Ext grid 分页无法正常显示 求助

Ext.onReady(function(){

var data = [
['01','123','a1','e1'],
['02','123','a2','e2'],
['03','123','a3','e3'],
['04','123','a4','e4'],
['05','123','a5','e5'],
['06','123','a6','e6'],
['07','123','a7','e7'],
['08','123','a8','e8'],
['09','123','a9','e9'],
['10','123','a10','e10']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({
fields:[
{name:'id'},
{name:'password'},
{name:'name'},
{name:'email'}
]
})
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header:'编号',dataIndex:'id'},
{header:'密码',dataIndex:'password'},
{header:'姓名',dataIndex:'name'},
{header:'邮箱',dataIndex:'email'}
],
stripeRows: true,
width:600,
frame:true,
title:'Sliding Pager',
autoHeight:true,
bbar:new Ext.PagingToolbar({
pageSize:5,
store:ds,
displayInfo:true,
displayMsg:'显示第{0}到第{1}条数据，共{2}条',
emptyMsg:'没有记录'
})
});

grid.render('grid');

ds.load({params:{start:0, limit:2}});
});

Answer 1

,bbar:new Ext.PagingToolbar({
id:'pagingToolbar',
pageSize:8,//每页显示条数
store:store,//表格关联的STORE
loadMask:true,//是否显示loading
displayInfo:true,
displayMsg: '从到条记录,共条记录',
emptyMsg:'无记录',
doLoad:function(start){//点下一页时,会把把新的start和limit传入后台
start = start;
var o = {}, pn = this.paramNames;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
store.load(});
}

Answer 2

额，你的bbar pagesize是5 分页确以2分页,效果应该第一页0-2挑 第二页3-7条

追问

一开始我在设值pagesize为2的后来改的，问题是该不该总共十条数据都在grid中显示，第一页和第二页都是同样的十条数据，根本没有分页。

追答

额这就费解了，刚刚测试了下还真不可以，不过一般分页用的store都是jsonStore,刚刚下载了源码，发现上面的分页示例也是json

追问

这里我想先用静态数据先测试一下，能行就用json来调后台数据库。

追答

你可以先用json尝试
store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'crud!hqlQuery.action'
}),
reader : new Ext.data.JsonReader({
root : 'list',
totalProperty : 'totalProperty'
}, [{
name : 'userId'
}, {
name : 'userName'
}, {
name : 'password'
}, {
name : 'isUseAble'
}]),
sortInfo : {
field : 'userId',
direction : "ASC"
}
});
var sm = new Ext.grid.CheckboxSelectionModel();
grid = new Ext.grid.GridPanel({
id : id,
title : '用户信息管理',
store : store,
loadMask : {
msg : '列表加载中...'
},
viewConfig : {
forceFit : true
},
sm : sm,
columns : [sm,{
header : '工号',
dataIndex : 'userId'
}, {
header : '用户名',
dataIndex : 'userName'
}, {
header : '密码',
dataIndex : 'password'
}, {
header: '是否可用',
dataIndex: 'isUseAble',
renderer : function(v){
if(v==1){
return "是";
}
if(v==0){
return "否";
}
}
}],
bbar : new Ext.PagingToolbar({
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
pageSize : 20,
store : store,
displayInfo : true,
emptyMsg : "没有记录",
plugins : [new Ext.ux.PageSizePlugin()]
}),
给你个参考，全部代码就不发布了
grid.on('activate',function(){
store.baseParams={
sqll : 'select * from users',
sqlc : 'select count(*) from users',
table : 'users'
}
store.load({
params : {
start : 0,
limit : 20
}
});
});