1. 程式人生 > >extjs3 分頁操作(帶查詢條件),獲取頁碼、開始行、分頁大小

extjs3 分頁操作(帶查詢條件),獲取頁碼、開始行、分頁大小

一、分頁操作

extjs3.x版本做分頁操作時,只需配置PagingToolbar 即可,總的來說還是比較方便的,但是預設情況下是不能進行帶查詢條件的分頁操作的,如何解決呢?

//xxx表示檔名,xxx.js
xxx.prototype.grid=function(){
....省略若干...
var store = this.store();
	store.load({
				params : {
					start : 0,
					limit : 25
				}
			});
	var grid = new Ext.grid.GridPanel({
				id : 'xxxx_Id',
				store : store,
				....省略若干...
				bbar : new Ext.PagingToolbar({//簡單的分頁配置
							pageSize : 25,
							store : store,
							displayInfo : true,
							displayMsg : '當前顯示從{0}至{1}, 共{2}條記錄',
							emptyMsg : "當前沒有記錄"
						})
			});
			
	return grid;
}
上面的bbar配置能進行簡單的分頁操作,但不能進行待條件的分頁操作,如果要達到這種效果,需要我們給store新增一個beforeload監聽事件。store 配置如下
xxx.prototype.store = function() {
	var store = new Ext.data.Store({
				proxy : new Ext.data.HttpProxy({
							url : path.do'
						}),
				reader : new Ext.data.JsonReader({
							root : 'result',
							totalProperty : 'totalCounts',
							id : 'id_xx',
							fields : [
							         .....
									]
						}),
				remoteSort : true
			});
	store.setDefaultSort('id', 'desc');
    
	store.on('beforeload',xxx.pageQueryParamInit);// 給store 新增beforeload監聽事件
	return store;
};
xxx.pageQueryParamInit=function(store, options){
    //獲取查詢條件1
	var testNo=Ext.getCmp("textNoid").getValue();// 更加id,獲取查詢條件
     //獲取查詢條件1
    var testVo=Ext.getCmp("textVoid").getValue();//
    var params = { 
        'Q_testNo_S_Lk':testNo,  //Q_testNo_S_Lk,Q_testVo_N_EQ...表示引數名字,後臺需要獲取
        'Q_testVo_N_EQ':testVo,  // (例如request.getParameter('Q_testNo_S_Lk'); 然後拼接到查            詢條件裡
        start : 0, 
		limit : 25 
    };
    store.baseParams =  params   ;  
};

二、分頁引數獲取

在進行poi匯出時我遇到一個問題。exjs本身不支援直接將頁面的資料匯出到excel,所謂匯出,其實是重新查詢,再借助poi將查詢到的資料匯出到excel。我是通過js傳送一個get請求將查詢條件 等傳遞到後臺的。那麼當頁面上是分頁的時候,如何將分頁引數傳遞過去呢?

// 獲取 PagingToolbar 物件,將上面的grid修改如下
...
var page;//
...
xxx.prototype.grid = function(){
...
	var store = this.store();
	store.load({
				params : {
					start : 0,
					limit : 25
				}
			});
	page = xxx.page(store); //  
	var grid = new Ext.grid.GridPanel({
				id : 'xxx_id',
				tbar : this.topbar(),
				store : store,
				 ...省略...
				bbar : page// page 即為所求PagingToolbar物件			 
			});


	return grid;

};
xxx.page= function(store){
	 return new Ext.PagingToolbar({
		pageSize : 25,
		store : store,
		displayInfo : true,
		displayMsg : '當前顯示從{0}至{1}, 共{2}條記錄',
		emptyMsg : "當前沒有記錄"
	})
};
//經過上面配置,便可獲取分頁所需引數了 limt start,pageSize;
console.log("start:"+page.cursor);
console.log("pageSize:"+page.pageSize);