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}
效果例如以下: