论坛首页 Java企业应用论坛

extjs 4.2 分页,根据查询条件分页

浏览 5295 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-05-15  

 extjs 4.2 分页和根据查询条件分页 废话不多说直接上代码:

 

Ext.onReady(getPageList);

function  getPageList(){
	//取得屏幕高度
	var BodyH = document.documentElement.clientHeight;
	var store;
	//model
	Ext.define('Bussiness', {
	     extend: 'Ext.data.Model',
	     fields: [
	         {name: 'docCode', 	type:'string'},
	         {name: 'serialNumber', type: 'string'},
	         {name: 'busiType',     type: 'string'},
	         {name: 'formId',	type: 'int'},
	         {name: 'docDate',  	type: 'string'},
	         {name: 'channelId',	type: 'string'},
	         {name: 'sdorgId',  	type: 'string'},
	         {name: 'aeraId',   	type: 'string'},
	         {name: 'comboCode', 	type: 'string'},
	         {name: 'packageId', 	type: 'string'},
	         {name: 'seriesNumber', type: 'string'},
	         {name: 'docStatus',    type: 'int'}
	     ]
	 });
	//jsonStore
	  store =Ext.create('Ext.data.Store',{			
			  model: 'Bussiness',
			  pageSize:10,
		      proxy:{
		      type: 'ajax',
		      	url:'bussinessInfo_list.action',
		      	reader:{
		      		type:'json',
		      		totalProperty:'recordCount', //总记录数 
   					root:'recordList'			 //json数据
   				}			   
		      }
 		}); 
	    //点击下一页时传递搜索框值到后台
	    store.on('beforeload', function (store, options) {  
	    	var keyWord=Ext.getCmp('KeyWord').getValue();
        	var new_params = { searchText:keyWord };  
        	Ext.apply(store.proxy.extraParams, new_params);  
        });  
 		var grid=Ext.create('Ext.grid.GridPanel', {
		    //title: '业务信息',
		    store: store,
		    id:'myGridPanel',
		    forceFit : true,
		    frame: true,
		    //顶部工具栏 查询输入框
		     tbar: [{ 
		    	 		xtype:'label',text:'请输入关键词:'
		    	 	},
		    	 	{
		    	 		xtype:'textfield',id:'KeyWord'
		    	 	},
		    	 	{
		    	 		text:'搜索',handler:function(){
		    	 		//点击搜索按钮将查询条件传递到后台
		    	 		var keyWord=Ext.getCmp('KeyWord').getValue();
		    	 		store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
		    	 		}
		    	 	}
 			],
		    columns: [
		        {header:'订单号',dataIndex:'docCode'},
                {header:'流水号',dataIndex:'serialNumber'},
                {header:'业务类型',dataIndex:'busiType'},
	            {header:'业务功能号',dataIndex:'formId'},
	            {header:'业务时间',dataIndex:'docDate',renderer:function(value){
	            	return new Date(parseInt(value)).toLocaleString().substr(0,19);

	            }},
	            {header:'渠道信息',dataIndex:'channelId'},
	            {header:'部门信息',dataIndex:'sdorgId'},
	            {header:'区域信息',dataIndex:'aeraId'},
	            {header:'套餐信息',dataIndex:'comboCode'},
	            {header:'政策信息',dataIndex:'packageId'},
	            {header:'受理号码',dataIndex:'seriesNumber'},
	            {header:'订单状态',dataIndex:'docStatus',renderer:function(value){
	            	switch(value){
	            		case 1: return "已经成功生成销售定单" ;
	            			break;
	            		case 2: return "生成失败" ;
	            			break;
	            		default: return "" ;
	            			break;
	            	}
	            }}
		    ],
		    dockedItems: [{
	        xtype: 'pagingtoolbar',
	        store: store,   // GridPanel中使用的数据
	        dock: 'bottom',
	        displayInfo: true,
	        emptyMsg:"没有数据",
	        height:BodyH+160,
		    displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
		    store:store
	    	}],
		    renderTo: Ext.getBody(),
			listeners: {
          	itemdblclick: this.handlePanelClick
     	 	}
		});	
		var keyWord=Ext.getCmp('KeyWord').getValue();
 		store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
 }

//当gridpanel列表被点击时调用
 function handlePanelClick(grid, rowIndex, e){
	 var docCode=rowIndex.data.docCode;
	 var status=rowIndex.data.docStatus;
	 window.location.href="bussinessInfo_detailes.action?docCode="+docCode+"&docstatus="+status;
 }

 

  • 大小: 150.9 KB
   发表时间:2014-05-17  
其实我不太喜欢把查询参数 放在 beforeload中,
0 请登录后投票
   发表时间:2014-05-19  
像这种 把参数直接写在baseparams下就行了
0 请登录后投票
   发表时间:2014-05-21   最后修改:2014-05-21
再提供一种比较好的方法给你:
Ext.apply(Ext.getCmp('mygrid').store.proxy.extraParams, {
	optName:Ext.getCmp('optName1').getValue(),
	logType:Ext.getCmp('logType').getValue(),
	optResult:Ext.getCmp('optResult').getValue(),
	opterName:Ext.getCmp('opterName').getValue()
});
Ext.getCmp('mygrid').store.reload();
1 请登录后投票
   发表时间:2014-05-23  
jlcon 写道
再提供一种比较好的方法给你:
Ext.apply(Ext.getCmp('mygrid').store.proxy.extraParams, {
	optName:Ext.getCmp('optName1').getValue(),
	logType:Ext.getCmp('logType').getValue(),
	optResult:Ext.getCmp('optResult').getValue(),
	opterName:Ext.getCmp('opterName').getValue()
});
Ext.getCmp('mygrid').store.reload();


多谢分享!
0 请登录后投票
   发表时间:2014-05-23  
tangduDream 写道
其实我不太喜欢把查询参数 放在 beforeload中,


这个只是我自己的思路,可以写出你的思路大家交流下
0 请登录后投票
论坛首页 Java企业应用版

跳转论坛:
Global site tag (gtag.js) - Google Analytics