personovertime.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:'beginTime',width:100},
		{header:"加班小时",dataIndex:'days',width:90},
		{header:"加班原因",dataIndex:'course',width:300}
	]);
	//这里设置是否可排序
	cm.defaultSortable = true;
	alert("test2");
	var Personal = Ext.data.Record.create([
		{name:'id',type:'string'},
		{name:'personName',type:'string'},
		{name:'beginTime',type:'string'},
		{name:'hours',type:'int'},
		{name:'salary',type:'int'},
		{name:'course',type:'string'}
	]);
	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/empservice/listOvertime.jsp?type=2'}),
		//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/empservice/listOvertime.jsp?type=2'}),
						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 beginTime = new Ext.form.TextField({id:'beginTime',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
					},
					new Ext.form.DateField({
						id:'beginTime',
						fieldLabel:'加班时间',
						name:'beginTime',
						width:200
					}),
					new Ext.form.NumberField({id:'hours',fieldLabel:'加班小时',width:90,name:'hours',allowNegative:false}),
					new Ext.form.NumberField({id:'salary',fieldLabel:'加班费',width:90,name:'salary',allowNegative:false,maxValue:100}),
					new Ext.form.TextArea({id:'course',fieldLabel:'加班原因',width:300,name:'course'})
					]
			}]
		}]
	});
	//定义列表控件
	var grid = new Ext.grid.EditorGridPanel({
		store:store,
		cm:cm,
		sm:sm,
		renderTo:'editor-grid2',
		width:1000,
		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,'请假时间',beginTime,
			{
				text:'查询',
				iconCls:'details',
				handler:function(){
					var tempstore = new Ext.data.Store({
						proxy: new Ext.data.HttpProxy({url:'http://localhost:8080/LEDOA/utils/empservice/listOvertime.jsp?type=2&personName='+personName.getValue()+'&beginTime='+beginTime.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").setDisabled(false);
		form_employee.findById("personName").setValue("不能为空");
		form_employee.findById("beginTime").setDisabled(false);
		form_employee.findById("beginTime").setValue(toDate("0000-00-00"));
		form_employee.findById("hours").setDisabled(false);
		form_employee.findById("hours").setValue("");
		form_employee.findById("salary").setDisabled(false);
		form_employee.findById("salary").setValue("");
		form_employee.findById("course").setDisabled(false);
		form_employee.findById("course").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", 			
			buttonAlign:'right',
			closable:false,
			width:600, 			
			height:600, 		
			border:false,