关于EXTjs的 grid分页问题
新上手ext,按照示例自己做了一个grid分页,但结果分页toolbar是出来了,也能用,但页面内数据却是很长一大节,设定高度后还有个滚动轴滑块出来,跟没有分页栏没什么区别,请问我是哪里写错了,还是少了什么。
Ext.onReady(function(){
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
createModel('Employee',
[
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
],
'name');
var mystore = Ext.create('Ext.data.Store', {
pageSize: 10,
data: createFakeData(200),
model: 'Employee',
proxy: {
type: 'memory',
url:'',
reader:{root:'items',totalProperty:'total'}
},
sorters: [{ property: 'rownumberer', direction: 'ASC' }]
})
var grid = Ext.create('Ext.grid.Panel', {
title:'测试分页表单',
width:600,
// height:400,
store:mystore,
loadMask:true,
collapsible:false,
selModel:new Ext.selection.CheckboxModel,
columns:[{
xtype: 'rownumberer',
width: 40,
sortable: false
},{
text: 'Name',
flex:1 ,
sortable: true,
dataIndex: 'name'
},{
text: 'Rating',
width: 125,
sortable: true,
dataIndex: 'rating'
},{
text: 'Salary',
width: 125,
sortable: true,
dataIndex: 'salary',
align: 'right',
renderer: Ext.util.Format.usMoney
}],
dockedItems:[{
xtype: 'pagingtoolbar',
store: mystore, // same store GridPanel is using
dock: 'bottom', //分页 位置
emptyMsg: '没有数据',
displayInfo: true,
displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ',
beforePageText: '第',
afterPageText: '页/共{0}页'
}],
renderTo:'demo'
} );
mystore.loadPage(1);
});
<div id='demo'></div>
[解决办法]
和你的后台的取数据的查询语句有关系,你需要取到分页信息(如:当前页,每页条数),然后传递到后台,进行分页查询
[解决办法]
每页20条数据
grid.store.load({params:{start: 0, limit: 20}});