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


extjs 4.2 分页,根据查询条件分页_第1张图片
 

 

  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;
 }

 

你可能感兴趣的:(java,分页,extjs4.2)