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

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":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}

效果例如以下：

转载于:https://www.cnblogs.com/bhlsheji/p/5126551.html

相关资源：数据结构—成绩单生成器