日期:2014-05-16  浏览次数:20365 次

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();