标签:extjs4
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.load({ params:{ start:0, limit: itemsPerPage } });//数据源重新加载 recordStore.loadPage(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"
: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"
}],"success"
:true}
效果如下:
extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框,布布扣,bubuko.com
extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框
标签:extjs4
原文地址:http://blog.csdn.net/liaosijianyu1938/article/details/36668647