listpersonal.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'}
	});
	//这是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());
					var tempstore = new Ext.data.Store({
						proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/employeer/listEmployeer.jsp'}),
						reader:new Ext.data.JsonReader({
							totalProperty: 'totalProperty',
							root:'user'
						}, Personal),
						sortInfo:{field:'id',direction:'ASC'}
					});
					tempstore.load({params:{start:0,limit:gridCombo.getValue()}});
					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单元格
						}
					});
				}
			}
		}
	});
	//这是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'
					},
					new Ext.form.NumberField({id:'personAge',fieldLabel:'年   龄',width:90,name:'personAge',allowNegative:false,maxValue:100})
					,
					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'
					},
					new Ext.form.NumberField({id:'personSalary',fieldLabel:'目前月薪',width:190,name:'personSalary',allowNegative:false})
				]
			}]
		}]
	});
	//定义列表控件
	
	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(){
					createDelDialog();
				}
			},
			{
				text:'测试',
				iconCls:'add',
				handler:function(){
					//alert(grid.getSelections().length);
					//var item=null;
					//var conn = Ext.lib.Ajax.getConnectionObject().conn; 
					//conn.open("GET", 'http://localhost:8080/MyWeb/test.jsp',false); 
					//conn.send(null); 
					//var myData = Ext.util.JSON.decode(conn.responseText);
					//item = eval(myData);
					
					var row = grid.getSelections();
					for(var i=0;i<row.length;i++){
						alert(row[i].get('id'));
					}
				}
			},
			'员工姓名:',personName,'身份证号',personIDCard,'联系电话',personTel,
			{
				text:'查询',
				iconCls:'details',
				handler:function(){
					var tempstore = new Ext.data.Store({
						proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/employeer/listEmployeer.jsp?personName='+personName.getValue()+'&personIDCard='+personIDCard.getValue()+'&personTel='+personTel.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:25}});	
	//新增方法,下面的方法应该不会影响整个页面不能显示
	function createNewDialog(){
		form_employee.findById("personName").setValue("不能为空");
		form_employee.findById("personDept").setValue("");
		form_employee.findById("personPost").setValue("");
		form_employee.findById("personSex").setValue("");
		form_employee.findById("personCulture").setValue("");
		form_employee.findById("personProfessional").setValue("");
		form_employee.findById("personNational").setValue("");
		form_employee.findById("personNarriage").setValue("");
		form_employee.findById("personAge").setValue("");
		form_employee.findById("personBirthday").setValue(toDate("0000-00-00"));
		form_employee.findById("personYear").setValue("");
		form_employee.findById("personLanguage").setValue("");
		form_employee.findById("personIDCard").setValue("");
		form_employee.findById("personTel").setValue("");
		form_employee.findById("personSocialID").setValue("");
		form_employee.findById("personSalary").setValue("");		               
		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",