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;

xxx.prototype.topbar = function() {
	var toolbar = new Ext.Toolbar({
				id : 'PAPContractManageFootBar',
				height : 30,
				bodyStyle : 'text-align:left',
				items : [
		 
				]
			});
     .....
	toolbar.add('->');
		toolbar.add(new Ext.Button({
					iconCls : 'excel-cls',
					text : '导出',
					handler : function() {	
					 
						document.location.href=__ctxPath+"/contract/excelPAPContract.do?start="+page.cursor+"&pageSize="+page.pageSize                             
					}
				}));
	
	 return toolbar;
};

 

你可能感兴趣的:(extjs)