extjs3 分頁操作(帶查詢條件),獲取頁碼、開始行、分頁大小
阿新 • • 發佈:2018-12-09
一、分頁操作
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);