listpersonal.js

一个简单的Ext例子

Ext.onReady(function(){
	Ext.QuickTips.init();
	//这是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 personID = new Ext.form.TextField({id:'personID',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});
	//.......
	//"新增"按钮对话框
	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 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:[form_employee]
		}); 	 	
		grid.setDisabled(true);//禁用
		win.show(); 
	}
	//"编辑"按钮对话框
	var fm = Ext.form;
	var sm = new Ext.grid.CheckboxSelectionModel();//Grid中的checkbox
	//
	var cm = new Ext.grid.ColumnModel([
		{},
		{},
		{},
		{},
		{},
		{},
		{},
		{},
		sm
	]);
	cm.defaultSortable = true;
	//
	var Personal = Ext.data.Record.create([]);
	var store = new Ext.data.Store({});
	//
	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);
	            });
			}
		});
	};
	//store.load();//里面传params参数来进行分页
	
	store.load({params:{start:0,limit:2}});	
});