personovertime.js

一个简单的Ext例子

Ext.onReady(function(){
	Ext.QuickTips.init();
	
	function formatDate(value){
		return value?value.dateFormat('Y, M d'):'';
	}
	function formatSex(value){
		if(value=="1")return "男";
		else return "女";
	}
	
	var addInstanceDlg = null;
	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:50
		},
		{
		id:'name',
		header:"用户名",
		dataIndex:'name',
		width:250,
		editor:new fm.TextField({allowBlank:false})
		},
		{
		header:"地区",
		dataIndex:'area',
		width:100,
		editor:new Ext.form.ComboBox({typeAhead:true,triggerAction:'all',transform:'area',lazyRender:true,listClass:'x-combo-list-small'})
		},
		{
		header:"电子邮件",
		width:220,
		align:'left',
		editor:new fm.TextField({allowBlank:true})
		},
		{
		header:"年龄",
		dataIndex:'age',
		width:70,
		align:'right',
		editor:new fm.NumberField({allowBlank:true,allowNegative:false,maxValue:100})
		},
		{
		header:"生日",
		dataIndex:'birthDay',
		width:95,
		renderer:formatDate,
		editor:new fm.DateField({format:'y/m/d',minValue:'1900/01/01',disabledDays:[0,6],disabledDaysText:'不许周末加班'})
		},
		{
		header:"性别",
		dataIndex:'sex',
		width:95,
		renderer:formatSex,
		editor:new Ext.form.ComboBox({typeAhead:true,triggerAction:'all',transform:'sex',lazyRender:true,listClass:'x-combo-list-small'})
		}
	]);
	//这里设置是否可排序
	cm.defaultSortable = true;
	alert("first");
	//接着 : Ext.data.Store
	var User = Ext.data.Record.create([
		{name:'id',type:'int'},
		{name:'name',type:'string'},
		{name:'area',type:'string'},
		{name:'email',type:'string'},
		{name:'age',type:'int'},
		{name:'birthDay',mapping:'birth',type:'date',dataFormat:'Y/m/d'},
		{name:'sex',type:'string'}
	]); 
	var store = new Ext.data.Store({
		url:'users.xml',
		//因为返回值是XML，所以必须创建一个解析器
		reader:new Ext.data.XmlReader({
			record:'user'
		}, User),
		sortInfo:{field:'name',direction:'ASC'}
	});
	alert("next");
	//最后 : Create The GridPanel
	var combo = new Ext.form.ComboBox({
			  store:new Ext.data.SimpleStore({
			      fields:['abbr','state'],
			      data:[[10,10],[20,20],[30,30]]
			  }),
			  width:50,
			  displayField:'state',
			  typeAhead:true,
			  mode:'local',
			  value:15,
    			  triggerAction:'all',
			  selectOnFocus:true,
			  listeners:{select:{
				fn:function(){
				    alert(combo.getValue());//这样来获取选择了是多少
				}}
			  }
			});
	var paging = new Ext.PagingToolbar({
			pageSize:2,
			store:store,
			displayInf:true,
			displayMsg:"显示第{0}条到{1}条记录，一共{2}条",
			emptyMsg:"没有记录",
			items:[
			'    每页显示数',
			combo
			]
		});
	var grid = new Ext.grid.EditorGridPanel({
		store:store,
		cm:cm,
		sm:sm,
		renderTo:'editor-grid',
		width:800,
		height:300,
		maskDisabled:false,//这里很重要，起到一个遮罩效果，如果是true的话，grid将被一块灰布遮住
		autoExpandColumn:'name',
		title:'用户管理',
		frame:true,
		clicksToEdit:2,
		selModel:new Ext.grid.RowSelectionModel({singleSelect:false}),
		//底部工具栏, 下面代码是实现分页的
		bbar:paging,
		//顶部工具栏
		tbar:[  '客户姓名:',new Ext.form.TextField({id:'username',allowBlank:true}),
			{
				text:'增加',
				iconCls:'add',
				handler : function(){//点击按钮执行的操作
					createNewDialog();
				}
			},
			{
				text:'删除所选',
				iconCls:'remove',
				handler:function(){
					var recordToedit = grid.getSelectionModel().getSelected();
					if(!recordToedit){
						Ext.Msg.alert("提示","请先选择要删除的行!");
						return;
					}
					// 弹出对话框警告
					if(recordToedit) {
						Ext.MessageBox.confirm('确认删除', '你真的要删除所选用户吗?', 
		    	    		function(btn) {
			    	     		if(btn == 'yes') {// 选中了是按钮
				    	     		JUserManager.removeUser( record.get("id"), function(data) {
				    	     		if(data) {
				    	     			// 更新界面, 来真正删除数据
							 			store.remove(record);
							 		} else {
							 			Ext.Msg.alert("出错了!","单个用户数据删除失败!");
							 		}
							 	});
						 	
						 	}
						}
						);
					}
            	}
        	},
			{
				text:'查看所选',
				iconCls:'details',
				handler:function(){
					//var records = sm.getSelections();
					//alert("选中了"+records.length+"个记录.");
					//for(var i=0;i<records.length;i++){
						//alert(records[i].get('name'));
					//}
					alert(Ext.get("username").value);
				}
			}
		]
	});
	//单元格编辑后事件处理
	grid.on("afteredit", afterEdit, grid);
	//事件处理函数
	function afterEdit(e){
		var record = e.record;//被编辑的记录
		//显示等待对话框
		Ext.Msg.wait("请等候", "修改中", "操作进行中...");
		JUserManager.editUser(record.get("id"), e.field, e.value, function(data){
			if(data){
				Ext.Msg.alert('您成功修改了用户信息');// 取得用户名
		 	} else {
		 		Ext.Msg.alert("出错了!","修改数据失败,将重置为修改前的值!",function(){
	            	record.set(e.field, e.originalValue);
	            });
			}
		});
	};
	alert("last");
	//store.load();//里面传params参数来进行分页
	
	store.load({params:{start:0,limit:2}});	
	//新增记录时创建的对话框
	function createNewDialog(){
		var form_employee = new Ext.FormPanel({
		layout:'column',
		items:[{
			items:[{
				columnWidth:.5,
				layout:'form',
				border:false,
				items:[
					{
					xtype:'textfield',
					fieldLabel:'合同编号',
					width:190,
					name:'contractno',
					allowBlank:false
					},
					{
					xtype:'textfield',
					fieldLabel:'项目名称',
					width:190,
					name:'proname',
					allowBlank:'项目名称不能为空!'
					},
					new Ext.form.ComboBox({
						fieldLabel:'所属部门',
						name:'dept',
						emptyText:'请选择部门'
					})]
			}]
		},{
			items:[{
				columnWidth:.5,
				layout:'form',
				border:false,
				items:[
					{
					xtype:'textfield',
					fieldLabel:'项目编号',
					width:200,
					name:'prono',
					allowBlank:false,
					blankText:'项目编号不能为空'
					},
					new Ext.form.DateField({
						fieldLabel:'完成时间',
						name:'finishtime',
						width:200
					})
				]
			}]
		}]
	});
		var tabs = new Ext.TabPanel({
			width:683,
			height:253,
			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:400, 			
			height:300, 		
			border:false,
			plain:true,
			layout:'fit',
			maskDisabled:false,
			defaults:{bodyStyle:'padding:10px'},	
			minimizable:true,
			buttons:[{
				text:'Save',
				handler:function(){
					grid.setDisabled(false);
					win.hide();
					//if(form_employee.isValid()){
						//form_employee.submit({
							//url:'',
							//method:'post',
							//reset : true,
							//failure : function(form, action) {
								///Ext.MessageBox.alert('友情提示', action.result.info); 
							//},
							//success : function(form, action) { 
								//addInstanceDlg.hide(); 
								//store.reload();
							//}
						//});
					//}else{
						//Ext.MessageBox.alert('错误', '字段填写不正确!');
					//}
					}
				}],
			items:[tabs]
		}); 	 	
		grid.setDisabled(true);//禁用
		win.show(); 
	}
	
});