您的位置:首页 > Web前端 > JavaScript

extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框

2014-07-03 16:36 441 查看
var itemsPerPage = 20;
var combo;
//创建数据源store
Ext.define('recordStore', {
extend : 'Ext.data.Store',
//			autoLoad : {
//				start : 0,
//				limit : itemsPerPage
//			},
start : 0,
limit : itemsPerPage,
pageSize : itemsPerPage,
model : 'recordModel',
proxy : {
// 异步获取数据,这里的URL可以改为任何动态页面,只要返回JSON数据即可
type : 'ajax',
url : '../drivingrecord/driveingInfoList.do',
reader : {
type : 'json',
root : 'serials', // 返回信息的根名称,为必选项
//	idProperty : 'id', // 数据唯一标识字段
successProperty : 'success',
totalProperty : "total"//总记录数
}
}
});

//分页的combobox下拉选择显示条数
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]]
}),
valueField: 'value',
displayField: 'text',
emptyText:20,
width: 50
});//若要“永久性”更改全局变量itemsPerPage,此combox要放在Ext.onReady();中

//添加下拉显示条数菜单选中事件
combo.on("select", function (comboBox) {
<span style="white-space:pre">	</span>var pagingToolbar=Ext.getCmp('pagingbar');
pagingToolbar.pageSize = parseInt(comboBox.getValue());
itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage
recordStore.pageSize = itemsPerPage;//设置store的pageSize,可以将工具栏与查询的数据同步。

recordStore.loadPage(1);//显示第一页,不论你在第几页重新选择显示条数,默认都显示第一页数据,rowNumber也会自动转换成从1开始。

});
//为grid增加分页工具栏
dockedItems : [{
id:'pagingbar',
xtype : 'pagingtoolbar',
store : recordStore,
dock : 'bottom',
displayInfo : true,
autoScroll : true,
beforePageText : "第",// update
afterPageText : "页  共 {0} 页",// update
firstText : "第一页",
prevText : "上一页",// update
nextText : "下一页",
lastText : "最后页",
refreshText : "刷新",
displayMsg : "显示 {0} - {1}条,共 {2} 条",// update
emptyMsg : '没有数据',
items: ['-', '每页显示',combo,'条']//此处是将创建的combobox添加到工具栏中
}]

后台传回json数据:

{"total":29,"serials":[{
"endNewOilCost":0,"endMileage":2.11960465E8,"endLatitude":"32.234183","beginMileage"
[code]:2.11960465E8,"statusType":"PARK","beginDescription":"江苏省南京市栖霞区麒麟广场(南京)东南1.1公里","beginLongitude":"118
.779383","beginTimeAsStr":"00:01:08","avelocity":"","sendDateAsStr":"2014-07-01","endTime":-24322000
,"endDateAsStr":"1970-01-01 01:14:38","time":"1小时13分钟30秒","endOilCost":0,"carid":"苏AF1185","sendtime"
:"","msgid":270003281,"begintimeStr":"2014-07-01 00:01:08","beginOilCost":0,"mileage":"","status":2,"endDescription"
:"江苏省南京市栖霞区麒麟广场(南京)东南1.1公里","beginTime":-28732000,"minVelocity":0,"endLongitude":"118.779403","endTimeAsStr"
:"01:14:38","beginDateAsStr":"1970-01-01 00:01:08","sendDate":{"nanos":0,"time":1404144000000,"minutes"
:0,"seconds":0,"hours":0,"month":6,"timezoneOffset":-480,"year":114,"day":2,"date":1},"timeclose":"1
小时13分钟30秒","endtimeStr":"2014-07-01 01:14:38","maxVelocity":0,"beginNewOilCost":0,"statusAsString":"
停车","serial":"15251782437","averageVelocity":"","beginLatitude":"32.234217"

[/code]
}],"success"
:true}


效果如下:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  extjs4