listcustomer.jsp

一个简单的Ext例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
	Ext.lib.Ajax.defaultPostHeader+=';charset=utf-8';//解决post乱码的
	Ext.QuickTips.init();
	alert("test1");
	var fm = Ext.form;
	//首先 : Ext.grid.ColumnModel
	var sm = new Ext.grid.CheckboxSelectionModel();//在Grid中添加checkbox控件
	var cm = new Ext.grid.ColumnModel([
		sm,//添加到这里
		{id:'id',header:"编号",dataIndex:'id',width:90},
		{id:'personName',header:"员工姓名",dataIndex:'personName',width:90},
		{header:"所属部门",dataIndex:'personDept',width:90},
		{header:"工作职位",dataIndex:'personPost',width:90},
		{header:"性   别",dataIndex:'personSex',width:90},
		{header:"文化程度",dataIndex:'personCulture',width:90},
		{header:"所读专业",dataIndex:'personProfessional',width:90},
		{header:"联系电话",dataIndex:'personTel',width:100},
		{header:"社保卡号",dataIndex:'personSocialID',width:100}
	]);
	//这里设置是否可排序
	cm.defaultSortable = true;
	alert("test2");
	var Personal = Ext.data.Record.create([
		{name:'id',type:'string'},
		{name:'personName',type:'string'},
		{name:'personDept',type:'string'},
		{name:'personPost',type:'string'},
		{name:'personNational',type:'string'},
		{name:'personNarriage',type:'string'},
		{name:'personSex',type:'string'},
		{name:'personBirthday',type:'string'},
		{name:'personCulture',type:'string'},
		{name:'personProfessional',type:'string'},
		{name:'personYear',type:'string'},
		{name:'personLanguage',type:'string'},
		{name:'personSalary',type:'string'},
		{name:'personAddress',type:'string'},
		{name:'personIDCard',type:'string'},
		{name:'personSocialID',type:'string'},
		{name:'personAge',type:'int'},
		{name:'personTel',type:'string'}
	]);
	var store = new Ext.data.Store({
		//proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/employeer/listEmployeer.jsp'}),
		proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/test.jsp'}),
		reader:new Ext.data.JsonReader({
			totalProperty: 'totalProperty',
			root:'user'
		}, Personal),
		sortInfo:{field:'id',direction:'ASC'}
	});
	alert("test3");
	//这是grid自定义每页显示数的combo控件
	var gridCombo = new Ext.form.ComboBox({
		store:new Ext.data.SimpleStore({
			fields:['abbr','state'],
			data:[[25,25],[50,50],[100,100],[200,200],[400,400],[600,600]]
		}),
		width:50,
		displayField:'state',
		typeAhead:true,
		mode:'local',
		value:15,
		triggerAction:'all',
		selectOnFocus:true,
		listeners:{
			select:{
				fn:function(){
					alert(gridCombo.getValue());
				}
			}
		}
	});
	//这是grid的下部工具栏
	var paging = new Ext.PagingToolbar({
		pageSize:25,
		store:store,
		displayInf:true,
		displayMsg:"显示第{0}条到{25}条记录，一共{25}条",
		emptyMsg:"没有记录",
		items:['   每页显示数',gridCombo]
	});
	//查询条件控件
	var personName = new Ext.form.TextField({id:'personName',allowBlank:true});//员工姓名
	var personDept = new Ext.form.TextField({id:'personDept',allowBlank:true});//员工部门
	var personIDCard = new Ext.form.TextField({id:'personIDCard',allowBlank:true});//员工身份证号
	var personSocialID = new Ext.form.TextField({id:'personSocialID',allowBlank:true});//员工社保卡号
	var personYear = new Ext.form.NumberField({id:'personYear',allowBlank:true,allowNegative:false,maxValue:100});//员工工作经验年限
	var personTel = new Ext.form.TextField({id:'personTel',allowBlank:true});//员工联系电话
	//对话框
	var form_employee = new Ext.form.FormPanel({
		layout:'column',
		items:[{
			items:[{
				columnWidth:.8,
				layout:'form',
				border:false,
				items:[
					{
					id:'id',xtype:'textfield',fieldLabel:'ID',width:190,name:'ID',disabled:true,allowBlank:true
					},
					{
					id:'personName',xtype:'textfield',fieldLabel:'员工姓名',width:190,name:'personName',allowBlank:false
					},{
					id:'personDept',xtype:'textfield',fieldLabel:'所属部门',width:190,name:'personDept'
					},{
					id:'personPost',xtype:'textfield',fieldLabel:'工作职位',width:190,name:'personPost'
					},{
					id:'personSex',xtype:'textfield',fieldLabel:'性    别',width:90,name:'personSex'
					},{
					id:'personCulture',xtype:'textfield',fieldLabel:'文化程度',width:190,name:'personCulture'
					},{
					id:'personProfessional',xtype:'textfield',fieldLabel:'所读专业',width:190,name:'personProfessional'
					}]
			}]
		},{
			items:[{
				columnWidth:.8,
				layout:'form',
				border:false,
				items:[
					{
					id:'personNational',xtype:'textfield',fieldLabel:'民   族',width:90,name:'personNational'
					},{
					id:'personNarriage',xtype:'textfield',fieldLabel:'婚姻情况',width:90,name:'personNarriage'
					},{
					id:'personAge',xtype:'textfield',fieldLabel:'年   龄',width:90,name:'personAge'
					},
					new Ext.form.DateField({
						id:'personBirthday',
						fieldLabel:'出生年月',
						name:'personBirthday',
						width:200
					}),{
					id:'personYear',xtype:'textfield',fieldLabel:'工作经验',width:100,name:'personYear'
					},{
					id:'personLanguage',xtype:'textfield',fieldLabel:'外语水平',width:190,name:'personLanguage'
					},{
					id:'personIDCard',xtype:'textfield',fieldLabel:'身份证号',width:190,name:'personIDCard'
					},{
					id:'personTel',xtype:'textfield',fieldLabel:'联系电话',width:190,name:'personTel'
					},{
					id:'personSocialID',xtype:'textfield',fieldLabel:'社保卡号',width:190,name:'personSocialID'
					},{
					id:'personSalary',xtype:'textfield',fieldLabel:'目前月薪',width:190,name:'personSalary'
					}
				]
			}]
		}]
	});
	//定义列表控件
	
	var grid = new Ext.grid.EditorGridPanel({
		store:store,
		cm:cm,
		sm:sm,
		renderTo:'editor-grid',
		width:1100,
		height:550,
		maskDisabled:false,//这里很重要，起到一个遮罩效果，如果是true的话，grid将被一块灰布遮住
		autoExpandColumn:'personName',
		title:'员工信息管理',
		frame:true,
		selModel:new Ext.grid.RowSelectionModel({singleSelect:false}),
		//底部工具栏, 下面代码是实现分页的
		bbar:paging,
		//顶部工具栏
		tbar:[
			{
				text:'增加  ',
				iconCls:'add',
				handler : function(){//点击按钮执行的操作
					createNewDialog();
				}
			},
			{
				text:'编辑  ',
				iconCls:'add',
				handler : function(){//点击按钮执行的操作
					createEditDialog();
				}
			},
			{
				text:'删除  ',
				iconCls:'add',
				handler: function(){
				}
			},
			'员工姓名:',personName,'身份证号',personIDCard,'联系电话',personTel,'社保卡号',personSocialID,
			{
				text:'查询',
				iconCls:'details',
				handler:function(){
					var tempstore = new Ext.data.Store({
						proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/utils.jsp?utils='+personName.getValue()}),
						reader:new Ext.data.JsonReader({
							totalProperty: 'totalProperty',
							root:'user'
						}, Personal),
						sortInfo:{field:'id',direction:'ASC'}
					});
					tempstore.load();
					tempstore.on("load",function(){
						store.removeAll();
						for(var i=0;i<tempstore.getCount();i++){
							grid.stopEditing();// 停止编辑
							store.insert(i,tempstore.getAt(i));
						 	grid.startEditing(i, 1);// 开始编辑1单元格
						}
					});
				}
			}
		]
	});
	store.load({params:{start:0,limit:2}});	
	//新增方法
	function createNewDialog(){		               
		var tabs = new Ext.TabPanel({
			width:783,
			height:453,
			activeTab:0,
			defaults:{autoScroll:true,frame:true},
			items:[{title:'基本信息',layout:'column',cls:'x-plain',items:[form_employee]},
			{title:'Another Tab',html:'Some other content'}]
		});
		var win=new Ext.Window({
			title:"frame", 			
			buttonAlign:'right',
			closable:false,
			width:600, 			
			height:600, 		
			border:false,
			plain:true,
			layout:'fit',
			maskDisabled:false,
			defaults:{bodyStyle:'padding:10px'},	
			minimizable:true,
			items:[tabs],
			buttons:[{
				text:'保存',
				handler:function(){
						form_employee.getForm().submit({
							url:'http://localhost:8080/LEDOA/utils/test.jsp',
							method:'post',
							reset : true,
							failure : function(form, action) {
								grid.setDisabled(false);
								store.reload();
								win.hide();
								Ext.MessageBox.alert('友情提示:新增员工成功!'); 
							},
							success : function(form, action) {
								alert("test1"); 
								grid.setDisabled(false);
								store.reload();
								grid.reconfigure(store,cm);//添加
								win.hide();
								alert("test3");
							}
						});
					}
				}]
		}); 	 	
		grid.setDisabled(true);//禁用
		win.show(); 
	}
	//编辑方法
	function createEditDialog(){
		var recordToedit = grid.getSelectionModel().getSelected();
		if(!recordToedit){
			Ext.Msg.alert("提示","请先选择要编辑的行!");
			return;
		}
		//声明一个store，然后根据store来进行赋值
		var tempstore = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/utils.jsp?utils='+recordToedit.get('id')}),
			reader:new Ext.data.JsonReader({
				totalProperty: 'totalProperty',
				root:'user'
			}, Personal),
			sortInfo:{field:'id',direction:'ASC'}
		});
		
		tempstore.load();
		tempstore.on("load",function(){
			//alert(tempstore.getAt(0).get('personName'));
			form_employee.findById("id").setDisabled(false);
			form_employee.findById("id").setValue(tempstore.getAt(0).get('id'));
			form_employee.findById("id").setDisabled(true); 
			form_employee.findById("personName").setValue(tempstore.getAt(0).get('personName'));
			form_employee.findById("personDept").setValue(tempstore.getAt(0).get('personDept'));
			form_employee.findById("personPost").setValue(tempstore.getAt(0).get('personPost'));
			form_employee.findById("personSex").setValue(tempstore.getAt(0).get('personSex'));
			form_employee.findById("personCulture").setValue(tempstore.getAt(0).get('personCulture'));
			form_employee.findById("personProfessional").setValue(tempstore.getAt(0).get('personProfessional'));
			form_employee.findById("personNational").setValue(tempstore.getAt(0).get('personNational'));
			form_employee.findById("personNarriage").setValue(tempstore.getAt(0).get('personNarriage'));
			form_employee.findById("personAge").setValue(tempstore.getAt(0).get('personAge'));
			form_employee.findById("personBirthday").setValue(toDate(tempstore.getAt(0).get('personBirthday')));
			form_employee.findById("personYear").setValue(tempstore.getAt(0).get('personYear'));
			form_employee.findById("personLanguage").setValue(tempstore.getAt(0).get('personLanguage'));
			form_employee.findById("personIDCard").setValue(tempstore.getAt(0).get('personIDCard'));
			form_employee.findById("personTel").setValue(tempstore.getAt(0).get('personTel'));
			form_employee.findById("personSocialID").setValue(tempstore.getAt(0).get('personSocialID'));
			form_employee.findById("personSalary").setValue(tempstore.getAt(0).get('personSalary'));
			form_employee.findById("personAddress").setValue(tempstore.getAt(0).get('personAddress'));
		});
		var tabs = new Ext.TabPanel({
			width:783,
			height:453,
			activeTab:0,
			defaults:{autoScroll:true,frame:true},
			items:[{title:'基本信息',layout:'column',cls:'x-plain',items:[form_employee]},
			{title:'Another Tab',html:'Some other content'}]
		});
		var win=new Ext.Window({
			title:"frame", 			
			buttonAlign:'right',
			closable:false,
			width:600, 			
			height:600, 		
			border:false,
			plain:true,
			layout:'fit',
			maskDisabled:false,
			defaults:{bodyStyle:'padding:10px'},	
			minimizable:true,
			items:[tabs],
			buttons:[{
				text:'更新',
				handler:function(){
						form_employee.getForm().submit({
							url:'http://localhost:8080/LEDOA/utils/test.jsp',
							method:'post',
							reset : true,
							failure : function(form, action) {
								grid.setDisabled(false);
								store.reload();
								win.hide();
								//Ext.MessageBox.alert('友情提示', action.result.info); 
							},
							success : function(form, action) {
								alert("test1"); 
								grid.setDisabled(false);
								store.reload();
								win.hide();
								alert("test3");
							}
						});
					}
				}]
		}); 	 	
		grid.setDisabled(true);//禁用
		win.show(); 
	}
	function toDate(str){   
    	var s=str.split("-");   
    	var date=new Date(parseInt(s[0]),parseInt(s[1])-1,parseInt(s[2])); 
    	return date;   
    }
</script>
<div id="editor-grid"></div>