extJs添加学员

本文介绍了一个使用 ExtJS 构建的用户信息管理界面案例,该界面包括用户编辑网格面板,支持添加、编辑和删除操作,并实现了数据验证功能。
	Ext.onReady(function() {
		var data=[['','','','','','','','','']];
		var sm = new Ext.grid.CheckboxSelectionModel();
		var rnb = new Ext.grid.RowNumberer();
		var cm = new Ext.grid.ColumnModel( [ rnb, sm, {
			header : '用户编号',
			dataIndex : 'userId',
			width:60,
			sortable : true
		}, {
			header : '用户名',
			dataIndex : 'userName',
			sortable : true,
			editor : new Ext.form.TextField()
		},{
			header : '用户密码',
			dataIndex : 'userPwd',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : '真实姓名',
			dataIndex : 'contactName',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : '手机',
			dataIndex : 'phone',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : '电话',
			dataIndex : 'officePhone',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : '地址',
			dataIndex : 'address',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : 'email',
			dataIndex : 'email',
			sortable : true,
			editor : new Ext.form.TextField()
		}, {
			header : '用户类型',
			dataIndex : 'membertype',
			sortable : true,
			editor:new Ext.form.ComboBox({
				transform:"userTypes",
				triggerAction: 'all',
				lazyRender:true
		      })
		} ]);
		var Plant = Ext.data.Record.create([
		    {name: 'userId',type: 'int'},
		    {name: 'userName', type: 'string'},
		    {name: 'userPwd', type: 'string'},
		    {name: 'contactName', type: 'string'},
		    {name: 'phone', type: 'int'},
		    {name: 'officePhone', type: 'int'},
		    {name: 'address', type: 'string'},
		    {name: 'email',type: 'string'},
		    {name: 'membertype',type: 'string'}
		]);
		var store = new Ext.data.Store( {
//			proxy : new Ext.data.HttpProxy( {url : 'user.do?method=query1'}),
//			reader : new Ext.data.JsonReader( {
//				total : 'total',
//				root : 'root', 
//				record: 'plant'},Plant)
//		});
			proxy : new Ext.data.MemoryProxy(data),
			reader : new Ext.data.ArrayReader( {
				total : 'total',
				root : 'root', 
				record: 'plant'},Plant)
		});
		var num = 12;
		store.load( {
			params : {
				start : 0,
				limit : num
			}
		});
		var viewport = new Ext.Viewport( {
			layout : 'border',
			items : [ {
				region : 'north',
				contentEl : 'north-div',
				border : true,
				split : true,
				height : 80,
				maxSize : 120,
				minSize : 50
			}, {
				region : 'south',
				contentEl : 'south-div',
				split : true,
				width : 50,
				height:80,
				maxSize : 120,
				minSize : 50
			}, {
				region : 'center',
				contentEl: 'center-div',
				split : true,
				border : true,
				collapsible : true,
				title : '当前位置 : 学员信息管理 》查看学员',
				maxSize : 120,
				minSize : 50,
				height:500,
				loadMask : {
					msg : '正在加载数据,请稍侯……'
				}
			}, {
				title : '学员信息管理',
				region : 'west',
				contentEl : 'west-div',
				split : true,
				border : true,
				collapsible : true,
				width : 130,
				minSize : 120,
				maxSize : 200
			},
			this.grid=new Ext.grid.EditorGridPanel( {
				renderTo : 'center-div',
				store : store,
				sm : sm,
				autoExpandColumn : 9,
				clicksToEdit : 1,// 鼠标击打次数,1单击,2双击
				cm : cm,
				loadMask : {
					msg : '正在加载数据,请稍侯……'
				},
				viewConfig : {
					forceFit : true
				},
				width : 1150,
				height : 380,
//				bbar : new Ext.PagingToolbar( {
//					pageSize : num,
//					store : store,
//					displayInfo : true,
//					displayMsg : '显示第{0}到{1}行,一共有{2}条',
//					emptyMsg : '没有记录'
//				}),
				tbar :{
					buttons : [{
						text : "添加一行",
						handler : function() {
							var gridcount = store.getCount() + 1;
							var p = new Plant({
								    userId : gridcount,
								    userName : '请填写用户名',
								    userPwd : '密码',
								    contactName : '真实姓名',
								    phone : '手机号码',
								    officePhone : '电话号码',
								    address : '地址',
								    email : 'email',
								    membertype : '读者'
									});
							grid.stopEditing();
							store.insert(gridcount - 1, p);
							grid.startEditing(0, 0);
							p.dirty = true;
							p.modified = p;
							if (store.modified.indexOf(p) == -1) {
								store.modified.push(p);
							}
						}
					},
					{
					text : '确认添加',
					handler : function() {
						var count = store.getCount();
						if(count<=0){
							Ext.MessageBox.alert('信息','请先添加数据...');
							return;
						}
						var pattern=/^[a-zA-Z]{0}[a-zA-Z0-9]{4,24}$/;
						var flag=true;
						for(var i=0;i<count;i++){
							var rec=store.getAt(i);
							if (!pattern.test(rec.get("userName"))) {
								Ext.MessageBox.alert('信息','用户编号:'+rec.get("userId")+ ',用户名必须以字母开头,且长度大于4小于25...');
								r.set("userName", "请填写用户名");
								flag=false;
								break;
							}
							if (!pattern.test(rec.get("userPwd"))) {
								Ext.MessageBox.alert('信息','用户编号:'+rec.get("userId")+  '密码必须以字母开头,且长度大于4小于25...');
								r.set("userPwd", "密码");
								flag=false;
								break;
							}
						}
						if(flag==false){
							return;
						}
						var jsons='';
						var array = new Array();
						var jsonData="[";
	                     jsonData = jsonData.substring(0,jsonData.length-1) + "]";
	                      Ext.Ajax.request({
	                            url:'user.do?method=add',
	                            params:{
	                            	jsons:jsonData
	                            },
	                            success:function(response){
	                                  Ext.MessageBox.alert('信息',response.responseText,function(){
	                                      store.reload();// 重新从服务器上得到数据。
	                                  });
	                            },
	                            failure:function(response){
	                                   Ext.MessageBox.alert('错误','请与后台服务人员联系');
	                                  }
	                           });  
	                        store.removeAll();
							grid.view.refresh();
					}
				},{
					text : '删除所选',
					handler : function() {
						var jsons='';
						var array = new Array();
						array = sm.getSelections();// 被选中的记录
						var updArray=store.getModifiedRecords();// 被修改的记录
						if (array.length <= 0) {
							Ext.MessageBox.alert('错误', '没有选择数据!');
						} else {
							Ext.MessageBox.confirm('温馨提示', '您确实要删除所选数据?', function(
									btn) {
								if (btn == 'yes') {
									for ( var i = 0; i < array.length; i++) {
										if (jsons != "") {
											jsons = jsons + ","+ array[i].data["userId"];
										} else {
											jsons = array[i].data["userId"];
										}
									}
									Ext.Ajax.request({url:'user.do?method=delete&jsons='+jsons,method:'POST',
				                        success:function(response){
				                        	Ext.MessageBox.alert('信息',response.responseText,function(){
				                        		store.reload();// 重新从服务器上得到数据。
				                                for(var i=0;i<array.length;i++){
				                                     store.remove(array[i]);
				                                     if(array[i].dirty){
				                                         for(var j=0;j< updArray.length;j++){
				                                         	if(updArray[j]==array[i]){
				                                         		 store.modified[j]=null;
				                                         	}
				                                         }
				                                     }
				                                 }	    
	                                         }); 
	                                   },
	                                    failure:function(response){
			                               Ext.MessageBox.alert('错误','请与后台服务人员联系');
	                                       }         
		                             	 });
								}
							})
							store.reload();
							grid.view.refresh();
						}
					}
				}]
				}
			})]
		});
		grid.on('afteredit', function(e) {
			// 获取被修改的列
			var updatelie = e.field;
			var r = e.record;
			var pattern=/^[a-zA-Z]{0}[a-zA-Z0-9]{4,24}$/;
			if (updatelie == "userName") {
				if (!pattern.test(e.value)) {
					Ext.MessageBox.alert('信息', '用户编号:'+r.get("userId")+ '用户名必须以字母开头,且长度大于4小于25...');
					r.set("userName", "");
					return;
				}
			}
			if (updatelie == "userPwd") {
				if (!pattern.test(e.value)) {
					Ext.MessageBox.alert('信息', '用户编号:'+r.get("userId")+ '密码必须以字母开头,且长度大于4小于25...');
					r.set("userPwd", "");
					return;
				}
			}
		})
	});
	


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值