JSP+Ext实现CURD, 更简洁明了

学习Ext有三天了, 参考《Ext2.0入门与精通》和官方的examples照猫画虎搞了个 员工管理'系统' 和 员工签到'系统'

希望大家一起学习, 由于学艺不精, 若有不足之处还请各位批评指正, 谢谢大家

 

/*
 * MemberManage.js
 * @author zuoming99
 */

Ext.onReady(function(){
    Ext.QuickTips.init();

    var fm = Ext.form;
	var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

    var cm = new Ext.grid.ColumnModel([
		sm,{
			header:'ID',
			dataIndex:'id',
			width:40
		},{
			header: "姓名",
			dataIndex: 'name',
			editor: new fm.TextField({
				allowBlank: false
			})
        },{
			header:'性别',
			dataIndex:'sex',
			width:60,
			align:'center',
			renderer:function(v){
				return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女');
			},
			editor:new fm.ComboBox({
				typeAhead: true,
				triggerAction: 'all',
				transform:'sexSelect',
				lazyRender:true,
			    readOnly:true,
				listClass: 'x-combo-list-small'
			})
		},{
			header:'年龄',
			dataIndex:'age',
			width:50,
			align:'right',
			renderer:function(v){
				var code = '<span style="color:';
				if(v<=25){
					code += '#008000';
				}else if(v>25 && v<=30){
					code += '#CC6600';
				}else if(v>30){
					code += '#804000';
				}
				return code+';">'+v+'</span>';
			},
			editor: new fm.NumberField({
				allowBlank:false,
				allowNegative: false,
				allowDecimals: false,
				maxValue:60,
				minValue:18
			})
		},{
			header: "生日",
			dataIndex: 'birth',
			renderer: function(v){
				return v ? v.dateFormat('Y年m月d日') : '';
			},
			editor: new fm.DateField({
				format: 'Y-m-d',
				minValue: '1800-01-01',
				readOnly:true,
				disabledDays: [0, 6],
				disabledDaysText: '请不要选择周末'
			})
        }
    ]);

    cm.defaultSortable = true;

    var Member = Ext.data.Record.create([
           {name: 'id', type: 'int'},
           {name: 'name', type: 'string'},
		   {name: 'sex'},
		   {name: 'age',type:'int'},
           {name: 'birth', type: 'date', dateFormat: 'Y-m-d'}
      ]);

	var store = new Ext.data.JsonStore({
		url:'./member_manage.jsp',
		baseParams:{command:'query'},
		totalProperty:'count',
		root:'members',
		fields:Member,
		pruneModifiedRecords:true,
		sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'
	});

	//表单窗体
	var memberAddWindow;

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'member_grid',
        resizeable:true,
		width:640,
        height:480,
        title:'员工管理',
        frame:true,
        clicksToEdit:1,
		sm:sm,
		iconCls:'icon-grid',
		loadMask: true,
		stripeRows:true,
		tbar:[
		{// 添加按钮
			text:'添加',
			iconCls:'user_add',
			handler:function(){
				var m = new Member({
					name:'新员工',
					sex:'m',
					age:'20',
					birth:new Date().clearTime()
				});
				grid.stopEditing();
				store.insert(0, m);
				grid.startEditing(0, 2);
				store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
			}
		},'-',{
			id:'newWindowButton',
			text:'新面板中添加',
			iconCls:'user_add',
			handler:function(){
			    showMemerAddWindow(); //显示表单所在窗体
			}
		},'-',{//删除按钮
			id:'btnDelete',
			text:'删除',
			iconCls:'user_delete',
			handler:function(){
				var sm = grid.getSelectionModel();
				var selected = sm.getSelections();
				var ids = [];
				for(var i=0;i<selected.length;i+=1){
					var member = selected[i].data;
					if(member.id) {
						ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
					}else{
						//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
						store.remove(store.getAt(i));
					}
				}
				if(ids.join('')=='') return;
				
				Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){
					if(btn=='yes'){
						//发送删除请求
						Ext.lib.Ajax.request(
							'POST',
							'./member_manage.jsp',{
								success:function(request){
									var message = request.responseText;
									Ext.Msg.alert('信息',message);
									store.reload();
								},failure:function(){
									Ext.Msg.alert('错误','删除时出现未知错误.');
								}
							},
							'command=delete&ids='+ids
						);
					}
				});
			}
		},'-',{//保存按钮
			text:'保存',
			iconCls:'save',
			handler:function(){
				var json = [];
				for(i=0,cnt=store.getCount();i<cnt;i+=1){
					var record = store.getAt(i);
					if(record.dirty) // 得到所有修改过的数据
						json.push(record.data);
				}
				if(json.length==0){
					Ext.Msg.alert('信息','没有对数据进行任何更改');
					return;
				}
				
				//发送保存请求
				Ext.lib.Ajax.request(
					'POST',
					'./member_manage.jsp',{
						success:function(request){
							var message = request.responseText;
							Ext.Msg.alert('信息',message);
							store.reload();
							//grid.getView().refresh();
						},
						failure:function(){
							Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
						}
					},
					'command=save&members='+encodeURIComponent(Ext.encode(json))
				);
			}
		},'-'],
	    bbar: new Ext.PagingToolbar({
	        pageSize: 10,
	        store: store,
	        displayInfo: true,
	        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
	        emptyMsg: "没有记录"
	    })

    });
    store.load({params:{start:0,limit:10}});
	
	
	
	/**
	 * 以下是表单 __________________________________________________
	 * */

	//姓名字段
	var nameField = new Ext.form.TextField({
		fieldLabel:'姓名',
		name:'memberName',
		allowBlank:false,
        anchor:'90%'
	});
	//性别字段
	var sexField = new Ext.form.ComboBox({
		fieldLabel:'性别',
		name:'sex',
		allowBlank:false,
	    mode: 'local',
	    readOnly:true,
	    triggerAction:'all',
	    anchor:'90%',
		store:new Ext.data.SimpleStore({
			fields:['value','text'],
			data:[
				['m','男'],
				['f','女']
			]
		}),
		valueField: 'value',
	    displayField: 'text'
	});
	//年龄字段
	var ageField = new Ext.form.NumberField({
		fieldLabel:'年龄',
		name:'age',
		allowBlank:false,
		allowNegative:false,
		allowDesimals:false,
		maxValue:80,
		minValue:18,
	    anchor:'90%'
	});
	//生日字段
	var birthField = new Ext.form.DateField({
		fieldLabel:'出生日期',
		name:'birth',
		format:'Y-m-d',
		readOnly:true,
	    anchor:'90%'
	});
	//表单对象
    var memberForm = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: '添加新员工信息',
        width: 300,
        url:'./member_manage.jsp?command=insert',
        
        items: [{
            layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
            items:[
            {//第一列
                columnWidth:0.5,
                layout: 'form',
                items: [nameField,sexField]
            },{//第二列
                columnWidth:0.5,
                layout: 'form',
                items: [ageField,birthField]
            }]
        }],
        buttons:[{
	        text:'提交',
	        handler:function(){
	        	if(memberForm.getForm().isValid())
		        	memberForm.getForm().submit({
		        		waitMsg:'保存中,请稍后...',
		        		success:function(){
		        			memberForm.getForm().reset();
		        			memberAddWindow.hide();
		        			store.reload();
		        		}
		        	});
	        }
	    },{
	    	text:'取消',
	    	handler:function(){
	    		memberForm.getForm().reset();
	    		memberAddWindow.hide();
	    	}
	    }]
    });
    
    //窗体对象
    function showMemerAddWindow(){
	    if(!memberAddWindow){
			memberAddWindow = new Ext.Window({
			    el:'window_win',
			    layout:'fit',
			    width:300,
			    height:200,
			    closable:true,
			    closeAction:'hide',
		        plain:true,
			    items: [memberForm]
			});
	    }
		memberAddWindow.show(Ext.get('newWindowButton'));
    }
});

 

 

 

/**
 * 
 * SignManage.js
 * @author zuoming99
 * 
 * */
  
Ext.onReady(function(){
	//初始化鼠标提示
	Ext.QuickTips.init();
	
	//Record
	var Sign = Ext.data.Record.create([
		//{name:'id',type:'int'},
		{name:'signDate',type:'date',dateFormat:'Y-m-d'}, //数据读取模式为 2008-1-1
		{name:'signTime',type:'string'},
		{name:'cname',type:'string'}
	]);
	
	var today = new Date().dateFormat('Y-m-d');
	var week = ['天','一','二','三','四','五','六'];
	function getWeek(ymd){ //得到星期几,参数格式2008-01-01
		ymd = ymd.split('-');
		var date = new Date();
		date.setFullYear(eval(ymd[0]));
		date.setMonth(eval(ymd[1])-1);
		date.setDate(eval(ymd[2]));
		return '星期'+week[date.getDay()];
	}

	//数据储备器
	var signStore = new Ext.data.JsonStore({
		url:'./sign_control.jsp',
		baseParams:{startDate:today,endDate:today,command:'query'},
		//totalProperty:'count',
		root:'records',
		fields:Sign,
		sortInfo:{field:'signTime',direction:'ASC'}
	});
	//全选Checkbox
	var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
	
	//列模型
	var columnModel = new Ext.grid.ColumnModel([
		sm,
		new Ext.grid.RowNumberer(),{
			header:'姓名',
			dataIndex:'cname',
			width:100
		},{
			header:'签到时间',
			dataIndex:'signTime',
			width:80,
			renderer:function(v){
				if(v<='09:00') 
					return '<span class="green">'+v+'</span>';
				else
					return '<span class="red">'+v+'</span>';
			}
		},{
			header:'工作日',
			dataIndex:'signDate',
			width:80,
			renderer:function(v){
				//显示模式为2008-01-01
				return v ? v.dateFormat('Y-m-d') : '';
			}
		},{
			header:'星期',
			dataIndex:'signDate',
			width:80,
			renderer:function(v){
				v = v.dateFormat('Y-m-d')
				return getWeek(v);
			}
		}
	]);
	columnModel.defaultSortable=true;
	
	//进行签到
	function doSign(){
		var signTime = new Date().toString().substr(10,5);
		Ext.Ajax.request({
			url:'./sign_control.jsp?command=sign&signTime='+signTime,
			success:function(request){
				var userInfo = eval('('+request.responseText.trim()+')');
				if(userInfo.success===true){
					signStore.reload();
					btnSign.disable();
				}
    		},
    		failure:function(){
    			Ext.Msg.alert('错误','无法链接服务器.');
    		}
		});
	}
	
	//查询-开始日期
	var sdField = new Ext.form.DateField({
		id:'startDate',
		name:'startDate',
		format:'Y-m-d',
		minValue:'2008-02-01',
		maxValue:'2009-12-31',
		allowBlank:false,
		value:today
	});
	//查询-结束日期
	var edField = new Ext.form.DateField({
		id:'endDate',
		name:'endDate',
		format:'Y-m-d',
		minValue:'2008-02-01',
		maxValue:'2009-12-31',
		allowBlank:false,
		value:today
	});
	
	//查询按钮
	var btnSearch = new Ext.Button({
		text:'查询',
		iconCls:'icon-search',
		handler:function(){
			if(sdField.isValid() && edField.isValid()){
				signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d');
				signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d');
			}
			signStore.load();
		}
	});
	
	//登录按钮
	var btnLogon = new Ext.Button({
		id:'btnLogon',
		text:'登录',
		iconCls:'icon-logon',
		handler:function(){
			logonWin.show('btnLogon');
		}
	});
	
	//签到按钮
	var btnSign = new Ext.Button({
		id:'btnSign',
		text:'签到',
		iconCls:'icon-sign',
		handler:doSign
	});
	
	//修改密码按钮
	var btnChangePwd = new Ext.Button({
		id:'btnChangePwd',
		text:'修改密码',
		iconCls:'icon-logon',
		handler:function(){
			changePwdWin.show('btnChangePwd');
		}
	});
	
	//退出按钮
	var btnLogout = new Ext.Button({
		id:'btnLogout',
		text:'退出',
		iconCls:'icon-logout',
		handler:function(){
			Ext.Ajax.request({
				url:'./sign_control.jsp?command=logout',
				success:function(){
					btnLogon.enable();
					btnLogout.disable();
					btnSign.disable();
					btnChangePwd.disable();
        		},
        		failure:function(){
        			Ext.Msg.alert('错误','无法链接服务器.');
        		}
			});
		}
	});
	
	//导出按钮
	var btnExport = new Ext.Button({
		id:'btnExport',
		text:'导出',
		iconCls:'icon-export',
		handler:function(){
			if(sdField.isValid() && edField.isValid()){
				var startDate=sdField.getValue().dateFormat('Y-m-d');
				var endDate = edField.getValue().dateFormat('Y-m-d');
				Ext.Ajax.request({
					url:'./sign_control.jsp?command=query',
					params:{ startDate:startDate, endDate:endDate },
					success:function(response){
						var json = eval('('+response.responseText.trim()+')');
						var records = json.records;
						var html = [
							'<table border=1><tr><th>姓名</th><th>日期</th><th>时间</th><th>星期</th></tr>'
						];
						for(var i=0;i<records.length;i+=1){
							var rc = records[i];
							html.push('<tr><td>'+rc.cname+'</td><td>'+rc.signDate+'</td><td>'+rc.signTime+'</td><td>'+getWeek(rc.signDate)+'</td></tr>');
						}
						html.push('</table>');
						html = html.join(''); //最后生成的HTML表格
						tableToExcel(html);
						//document.getElementById('debuger').innerHTML=html;
					},
					failure:function(response){
						Ext.Msg.alert('信息',response.responseText.trim());
					}
				});
			}
		}
	});
	
	//创建Grid
	var signGrid = new Ext.grid.GridPanel({
		store:signStore,
		cm:columnModel,
		sm:sm,
		renderTo:'sign_grid',
		width:600,
		height:440,
		title:'员工签到信息管理系统',
		frame:true,
		iconCls:'icon-grid',
		loadMask:true,
		stripeRows:true,
		tbar:[
			'日期从',sdField,' 到 ',edField,'  ',btnSearch,'-',
			btnLogon,btnSign,btnChangePwd,btnLogout,btnExport
		]
	});
	
	btnLogout.disable(); //退出按钮
	btnSign.disable(); //签到按钮
	btnChangePwd.disable(); //修改密码按钮
	
	signStore.load();
	
	//登录-用户名字段
	var enameField = new Ext.form.TextField({
		fieldLabel:'用户名',
		id:'ename',
		name:'ename',
		allowBlank:false,
		anchor:'100%'
	});
	
	//登录-密码字段
	var pwdField = new Ext.form.TextField({
		fieldLabel:'密码',
		id:'pwd',
		name:'pwd',
		allowBlank:false,
		inputType:'password',
		anchor:'100%'
	});
	
	//登录表单
	var logonForm = new Ext.form.FormPanel({
		labelAlign:'right',
		labelWidth:50,
		frame:true,
		//title:'用户登录',
		url:'./sign_control.jsp?command=logon',
		items:[ enameField ,pwdField ],
		buttons:[{
			text:'登录',
			handler:function(){
				var f = logonForm.getForm();
				if(f.isValid()){
					f.submit({
						waitMsg:'登录中,请稍候...',
		        		success:function(form, action){
		        			if(action.result.logonOK===false){
		        				Ext.Msg.alert('信息',action.result.msg);
		        				return;
		        			}
							f.reset();
							logonWin.hide();
							btnLogon.disable();
							btnLogout.enable();
							btnChangePwd.enable();
							if(action.result.signed===false){//如果已签到,则禁用签到按钮
								btnSign.enable();
							}
		        		},
		        		failure:function(){
		        			Ext.Msg.alert('错误','无法链接服务器.');
		        		}
					});
				}
			}
		},{
			text:'取消',
			handler:function(){
				logonForm.getForm().reset();
				logonWin.hide();
			}
		}]
	});
	
	//登录窗口
	var logonWin = new Ext.Window({
		title:'用户登录',
		autoHeight:true,
		width:300,
		closeAction:'hide',
		items:[logonForm]
	});
	
	//修改密码表单
	var changePwdForm = new Ext.FormPanel({
		labelAlign:'right',
		labelWidth:70,
		frame:true,
		url:'./sign_control.jsp?command=changePwd',
		items:[
			new Ext.form.TextField({
				id:'oldPassword',
				name:'oldPassword',
				fieldLabel:'原密码',
				inputType:'password',
				allowBlank:false,
				anchor:'100%'
			}),
			new Ext.form.TextField({
				id:'newPassword',
				name:'newPassword',
				fieldLabel:'新密码',
				inputType:'password',
				allowBlank:false,
				anchor:'100%'
			}),
			new Ext.form.TextField({
				id:'newPassword2',
				name:'newPassword2',
				fieldLabel:'重复密码',
				inputType:'password',
				allowBlank:false,
				anchor:'100%'
			})
		],
		buttons:[{
			text:'提交',
			handler:function(){
				var f = changePwdForm.getForm();
				if(!f.isValid()) return;
				if(Ext.get('newPassword').getValue() != Ext.get('newPassword2').getValue()){
					Ext.Msg.alert('信息','两次输入的密码不一致');
					return;
				}
				f.submit({
					waitMsg:'执行中,请稍候...',
	        		success:function(form, action){
        				Ext.Msg.alert('信息',action.result.msg);
	        			if(action.result.changeOK===false){ //如果失败的话
	        				return;
	        			}
						f.reset();
						changePwdWin.hide();
	        		},
	        		failure:function(){
	        			Ext.Msg.alert('错误','无法链接服务器.');
	        		}
				});
			}
		},{
			text:'取消',
			handler:function(){
				changePwdForm.getForm().reset();
				changePwdWin.hide();
			}
		}]
	});
	
	//修改密码窗口
	var changePwdWin = new Ext.Window({
		title:'修改密码',
		autoHeight:true,
		width:300,
		closeAction:'hide',
		items:[changePwdForm]
	});
});