先给出效果:
第一步:先定义store
noSetMeterStore = Ext.create('Ext.data.Store',{
model : noSetModel,//model根据自己需求定义model
pageSize : itemsPerPage,//分页条数,这里的值是跟分页工具右下方显示的“显示n-m条/共x条”有关系
proxy : {
type : 'ajax',
actionMethods: {
read: 'POST'
},
url : getNoSetMeterUrl,
reader : {
type : 'json',
root : 'noSetParaList',
successProperty: 'success',
totalProperty : 'count'
}
}
});
noSetMeterStore.load({
params : {
start : start,
limit : itemsPerPage//分页条数
}
});
第二步:定义一个combobox,以便于在分页工具中添加
var combo = Ext.create('Ext.form.ComboBox', {
name : 'pagesize',
hiddenName : 'pagesize',
store : new Ext.data.ArrayStore({
fields : [ 'text', 'value' ],
data : [ [ '20', 20 ], [ '40', 40 ], [ '60', 60 ],
[ '80', 80 ], [ '100', 100 ] , [ '200', 200 ]]
}),
valueField : 'value',
displayField : 'text',
emptyText : 20,
width : 50
});
第三步:给combobox加上change事件
combo.on("select", function(comboBox) {
var pagingBar = Ext.getCmp('pagingbar');//获取分页工具组件
pagingBar.pageSize = parseInt(comboBox.getValue());//修改分页工具组件的pagingsize
itemsPerPage = parseInt(comboBox.getValue());给分页条数赋值,这里你可以定义一个全局的分页条数,每次在这里更改他的值
noSetMeterStore.limit = itemsPerPage;//将store里面的limit值也改掉
noSetMeterStore.pageSize = itemsPerPage;//同理改掉store里面的pagesize值。这个很重要!!!!
noSetMeterStore.loadPage(1);//不管是在哪个页面,都让store去显示第一个页面,加载第一个页面的数据
})
第四步:定义一个分页工具,将下拉框给添加进去
var pagingBar = Ext.create('Ext.toolbar.Paging', {
store : noSetMeterStore,
id : 'pagingbar',
dock : 'bottom',
pageSize : itemsPerPage,//这里要将全局的变量写进去
displayInfo : true,
displayMsg : '<s:text name="hint.page.info"/>',// 显示0-1条,共2条
emptyMsg : '<s:text name="hint.noData" />', // 没有数据
items : [ '-', '每页显示', combo, '条' ],//在这里将下拉框加进去,其他的没什么特别的
listeners : {
change : function(paging, pageData) {
start = (pageData.currentPage - 1) * itemsPerPage;
total = pageData.total;
}
}
});
然后就可以愉快的体验了自定义分页了!!!
在具体操作的时候可以根据自己的需求,调整顺序;以上代码亲测可用。