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}

效果例如以下:




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM