Ext3.1.1（四）grid.GridPanel+FormPanel+PagingToolBar 完成基础的表格展示带查询和分页

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/57086663

Ext.onReady(function(){
			myuploadformpanel = new Ext.FormPanel({
				id : "myuploadformpanel",
				layout : "column",			
				labelWidth: 40,
				width:1200,
	            fileUpload:true,
				items : [{	
					columnWidth : .25, // 该列有整行中所占百分比
	           		layout : "form", 
	           		items :[{
	           			//id:'file',
						xtype:'textfield',
						fileUpload:true,  
						fieldLabel:'资料',
						labelStyle:'margin:0 0 10px 0;',
						name: 'uploadFile',   
					    inputType: 'file',
					    blankText: '请上传文件',
					    width:170,
	           		}]
				},{
					columnWidth : .08, // 该列有整行中所占百分比           		
	           		items :[{
	           			xtype : "button",
		                text : "上传",
		                width : 80,
		                handler : function(){                
		                	myuploadformpanel.getForm().submit({  
					            url:'<%=basePath%>ext-upload',
					            method:'POST',  
					            success:function(resp,obt)
					            {  
					            	alert(1);
					                //Ext.MessageBox.alert("提示信息","上传成功！");  
					            },  
					            failure : function(form, action) 
					            {  
					                Ext.MessageBox.alert("提示信息","上传失败！");  
					            }  
					        }); 
		                }
	           		}]
				}]
			});
			var myformpanel = new Ext.FormPanel({ //Panel
				id : "myformpanel",
				layout : "column",			
				labelWidth: 40,
				width:1200,
				items : [{
					columnWidth : .25, // 该列有整行中所占百分比
	           		layout : "form", 
	           		items :[{
	           		 	xtype : "textfield",
		                fieldLabel : "账号",
		                name:"account",
		                width:150,
	           		},
	           		//下拉框加载本地数据SimpleStore
	           		{
	           			xtype : "combo",
		                fieldLabel : "性别",
		                name:"gender",
		                width:150,
		                mode: 'local',//加载本地数据,默认是remote
		                triggerAction: 'all',//all代表每次选择都加在所有选项，query代表下一次选择只展示上一次选择的选项
		                displayField: 'text',//用于展示的字段
			            valueField: 'value', //保存实际值字段
			            emptyText:'--请选择--',//未选择展示的文本
				        selectOnFocus:true,//true代表选择该条目时焦点自动聚集到下拉第一个选项上
				        editable: false,//false代表不可编辑
		                store: new Ext.data.SimpleStore({
			                 data: [
			                     ['male','男'],['female','女']
			                 ],
			                 fields: ['value', 'text']
			             }),
	           		},
	           		//下拉框加载后台数据
	           		{
	           			xtype : "treecombo",
		                fieldLabel : "部门",
		                name:"dept",
		                width:150,
		                maxHeight:200, 
		                url:'${pageContext.request.contextPath}/testTreeCombo',                
		                triggerAction : 'all', 	                                                                            
			            mode: 'local',	           	            
			            displayField: 'text',//显示文本字段
			            valueField: 'id', //值字段
			            emptyText:'--请选择--',
				        selectOnFocus:true,
	           		}]
				}
				,{
					columnWidth : .08, // 该列有整行中所占百分比           		
	           		items :[{
	           			xtype : "button",
		                text : "查询",
		                width : 80,
		                handler : function(){                
		                	loadStoreByConditon(pageNum,pageRows);
		                }
	           		}]
				}]
			});
			myformpanel.form.load({
				url:getRootPath()+'ext-load'
			});
			
			var mypanel = new Ext.Panel({ //FormPanel
				title : "用户管理",
				autoWidth : true,
				autoHeight : true,
				frame : true,
				renderTo : "mypanel",
				layout : "form", // 整个大的表单是form布局		
				bodyStyle:'background:#E4E4E4;',
				items : [myuploadformpanel,myformpanel,sm_UserManager_userlist_GridPanel]
			});
		});

sm_UserManager_userlist_GridPanel：

/*
 * 后台返回的数据格式：
 * 
 * {
 * 	"success":true,"messageCode":"ok_find_page_by","message":"ok_find_page_by",
 * 	"body":
 * 	{
 * 		"content":[{"createtime":1483512015000,"id":1,"edittime":1483512019000,"gender":"男","username":"张三","deptname":"A"}],
 * 		"pageable":{"page":0,"size":30},
 * 		"total":1
 * 	}
 * }*/
var pageRows = 30;
var pageNum = 1;

var getQuery = function(page, rows) {
	var json = {
		'page' : page,
		'rows' : rows
	};
	var myformpanel = Ext.getCmp('myformpanel');
	
	var values = myformpanel.getForm().getValues();		
	
	var account = values.account;
	if (account != '' && account != undefined) {
		json[':userName'] = '%' + account + '%';
	}
	var sex = values.gender;
	if (sex != '' && sex != undefined) {
		if(sex == '--请选择--'){
			sex = "";
		}else{
			json[':gender'] = ''+sex;
		}	
	}
	
	var department_name = values.dept;
	if (department_name != '' && department_name != undefined) {
		if(department_name == '--请选择--'){
			department_name = "";
		}else{
			json[':deptName'] = ''+department_name;
		}	
	}
	return json;
};

//配置前台数据和数据库字段的映射关系,name用于被其它组件引用，mapping表示对应JSON业务数据的key
var sm_UserManager_userlist_Record_User = Ext.data.Record.create([
	{ name: 'id' , mapping : 'id'},     
	{ name: 'userName' , mapping : 'username'}, 
	{ name: 'gender' , mapping : 'gender'}, 
	{ name: 'deptName' , mapping : 'deptname'}, 
	{ name: 'createTime' , mapping : 'createtime'}, 
	{ name: 'editTime' , mapping : 'edittime'},
]);	

//描述grid每一列对应的JSON中业务数据
var sm_UserManager_userlist_ColumnModel = new Ext.grid.ColumnModel([ 
	new Ext.grid.CheckboxSelectionModel({singleSelect : false}),
	{ header: "id", width: 40, sortable: true, dataIndex: 'id',hidden: false}, 
	{ header: '用户名', dataIndex: 'userName', width:100}, 
	{ header: '性别', dataIndex: 'gender', width:100}, 
	{ header: '部门', dataIndex: 'deptName', width:100}, 
	{ header: '创建日期', dataIndex: 'createTime' , width:100}, 
	{ header: '修改日期', dataIndex: 'editTime' , width:100}, 
]); 

/**
 * 数据写入器，主要作用是将前台生成的数据格式进行编码传入后台，避免前后台格式不匹配
 */
var user_Jsonwriter = new Ext.data.JsonWriter({
	encode : true,
	type : 'json',
	writeAllFields : true
});

/**
 * 数据读取器,主要作用是描述从后台传过来的json数据
 * 
 */
var sm_UserManager_userlist_Reader = new Ext.data.JsonReader({	
	root : 'body.content',//指定后台json中的业务数据
	totalProperty : 'body.total',//指定后台json中业务数据的总数
	idProperty : "id"//指定后台json中业务数据的id字段
}, sm_UserManager_userlist_Record_User);

//数据集，ext的其它组件通过它来获取后台传过来的值
var sm_UserManager_userlist_Store = new Ext.data.Store({ 
	proxy : new Ext.data.HttpProxy({
		url : getRootPath()+'/container/findPageByThis' + '?named=container_page',
		method : 'post',
		jsonData : {
			page : pageNum,
			rows : pageRows
		},
		writer : user_Jsonwriter,
		headers : {
			'Content-Type' : 'application/json; charset=UTF-8'
		}
	}),
	writer : user_Jsonwriter,
	reader: sm_UserManager_userlist_Reader
});
//调用数据集
sm_UserManager_userlist_Store.load();	

var sm_UserManager_userlist_GridPanel = new Ext.grid.GridPanel({ 
	ds: sm_UserManager_userlist_Store, 
	cm: sm_UserManager_userlist_ColumnModel,
	sm: new Ext.grid.CheckboxSelectionModel({singleSelect : false}),
	autoScroll:true,
//	autoHeight : true,
	height:document.documentElement.clientHeight - 180,
	autoWidth : true,
	tbar:new Ext.Toolbar({
		labelAlign:"center",
		items:[
		   {
			   xtype:'button',
			   text:'测试',
			   handler:function(){
				   //选中行
				   var selectRow = sm_UserManager_userlist_GridPanel.getSelectionModel().getSelections()[0];
				   alert(selectRow.data.createTime);
			   }
		   }
		]
	}),
	bbar:new Ext.PagingToolbar({  
        pageSize:pageRows,  
        store:sm_UserManager_userlist_Store,  
        displayInfo:true, 
        beforePageText: '第',
        //{0}代表总页数
		afterPageText: '页    共 {0} 页',
		//{0},{1},{2} 分别代表起始值，结束值，总记录数
        displayMsg:'当前显示第{0}条到{1}条记录，共{2}条记录',  
        emptyMsg:'没有记录',
        doRefresh:function(){           
        	loadStoreByConditon(pageNum, pageRows);
			return true;
		},
		listeners : {
			"beforechange" : function(bbar, params) {
				var grid = bbar.ownerCt;
				var store = grid.getStore();
				var start = params.start;
				var limit = params.limit;    			
				var page = (start / pageRows) + 1;
				var pageNum = page;
				loadStoreByConditon(pageNum, pageRows);
				return true;
			}
		}
    }) 
}); 

/**
 * 通过条件重新加载store结果集
 * @param pn 当前第几页
 * @param pr 一页多少条
 */
function loadStoreByConditon(pn, pr){
	var json = getQuery(pn, pr);  
	sm_UserManager_userlist_Store.proxy.conn.jsonData = json;
	sm_UserManager_userlist_Store.reload({
		params : []
	});
}