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

http://blog.youkuaiyun.com/liaosijianyu1938/article/details/36668647?utm_source=tuicool
[javascript] view plain copy

1. var itemsPerPage = 20;  
2. var combo;  
3. //创建数据源store  
4. Ext.define('recordStore', {  
5.             extend : 'Ext.data.Store',  
6. //          autoLoad : {  
7. //              start : 0,  
8. //              limit : itemsPerPage  
9. //          },  
10.             start : 0,  
11.             limit : itemsPerPage,  
12.             pageSize : itemsPerPage,  
13.             model : 'recordModel',  
14.             proxy : {  
15.                 // 异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可  
16.                 type : 'ajax',  
17.                 url : '../drivingrecord/driveingInfoList.do',  
18.                 reader : {  
19.                     type : 'json',  
20.                     root : 'serials', // 返回信息的根名称，为必选项  
21.                 //  idProperty : 'id', // 数据唯一标识字段  
22.                     successProperty : 'success',  
23.                     totalProperty : "total"//总记录数  
24.                 }  
25.             }  
26.         });  
27.   
28. //分页的combobox下拉选择显示条数  
29.      combo = Ext.create('Ext.form.ComboBox',{  
30.           name: 'pagesize',  
31.           hiddenName: 'pagesize',  
32.           store: new Ext.data.ArrayStore({  
33.               fields: ['text', 'value'],  
34.               data: [['20', 20], ['40', 40],['60', 60], ['80', 80], ['100', 100]]  
35.           }),  
36.           valueField: 'value',  
37.           displayField: 'text',  
38.           emptyText:20,  
39.           width: 50  
40.       });//若要“永久性”更改全局变量itemsPerPage，此combox要放在Ext.onReady(）;中  
41.   
42. //添加下拉显示条数菜单选中事件  
43.      combo.on("select", function (comboBox) {  
44.      <span style="white-space:pre">   </span>var pagingToolbar=Ext.getCmp('pagingbar');  
45.         pagingToolbar.pageSize = parseInt(comboBox.getValue());  
46.         itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage  
47.         recordStore.pageSize = itemsPerPage;//设置store的pageSize，可以将工具栏与查询的数据同步。  
48.           
49.         recordStore.loadPage(1);//显示第一页,不论你在第几页重新选择显示条数，默认都显示第一页数据，rowNumber也会自动转换成从1开始。  
50.           
51.      });  
52. //为grid增加分页工具栏  
53. dockedItems : [{  
54.                                             id:'pagingbar',  
55.                                             xtype : 'pagingtoolbar',  
56.                                             store : recordStore,  
57.                                             dock : 'bottom',  
58.                                             displayInfo : true,  
59.                                             autoScroll : true,  
60.                                             beforePageText : "第",// update  
61.                                             afterPageText : "页  共 {0} 页",// update  
62.                                             firstText : "第一页",  
63.                                             prevText : "上一页",// update  
64.                                             nextText : "下一页",  
65.                                             lastText : "最后页",  
66.                                             refreshText : "刷新",  
67.                                             displayMsg : "显示 {0} - {1}条，共 {2} 条",// update  
68.                                             emptyMsg : '没有数据',  
69.                                             items: ['-', '每页显示',combo,'条']//此处是将创建的combobox添加到工具栏中  
70.                                         }]  

后台传回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}

效果如下：