nav_dept.js

一个简单ssh+extjs的人力资源管理系统（转载）

Ext.onReady(function() {
	/*----------------------------------部门树面板------------------------------------*/
	var deptTree = new Ext.tree.TreePanel({
				id : 'dept_tree',
				title : '部门导航',
				renderTo : 'dept_tree',
				columnWidth : .25,
				frame : true,
				layout : 'fit',
				height : 300,
				width : 180,
				minSize : 150,
				minSize : 250,
				root : new Ext.tree.AsyncTreeNode({
							id : '0',
							text : '部门'
						}),
				loader : new Ext.tree.TreeLoader({
							dataUrl : 'getNodes.do?type=dept'
						}),
				animate : true,
				border : false,
				autoScroll : true
			});

	/*----------------------------------部门表单面板------------------------------------*/
	var deptForm = new Ext.form.FormPanel({
		id : 'dept_form',
		title : '部门信息编辑区',
		renderTo : 'dept_form',
		frame : true,
		height : 300,
		columnWidth : .75,
		labelAlign : 'right',
		labelWidth : 60,
		defaults : {
			labelSeparator : ':'
		},
		reader : new Ext.data.JsonReader({
					root : 'data'
				}, ['deptname','depttype','deptduty','addr','tel',
					{name:'createdate',type:'date',dateFormat:'Y-m-d'}]),
		items : [{
			xtype : 'panel',
			layout : 'column',
			border : true,
			anchor : '70%',
			items : [{
				columnWidth : .5,
				layout : 'form',
				border : true,
				defaultType : 'textfield',
				items : [{
							name : 'deptname',
							fieldLabel : '部门名称',
							allowBlank : false
						}, {
							name : 'addr',
							fieldLabel : '部门地址',
							allowBlank : true
						}]
			}, {
				columnWidth : .5,
				layout : 'form',
				border : true,
				defaultType : 'textfield',
				items : [{
					xtype : 'combo',
					hiddenName : 'depttype',
					fieldLabel : '部门类型',
					allowBlank : false,
					width : 125,
					mode : 'local',
					store : new Ext.data.SimpleStore({
								fields : ['value', 'display'],
								data : [['manager', '管理部门'],
										['function', '职能部门'],
										['produce', '生产部门'],
										['business', '业务部门'],
										['guanxi', '公共关系'],
										['logistics', '后勤部门']]
							}),
					displayField : 'display',
					valueField : 'value',
					typeAhead : true,
					forceSelection : true,
					selectOnFocus : true,
					triggerAction : 'all'
				}, {
					name : 'tel',
					fieldLabel : '部门电话'
				}]
			}]
		}, {
			name : 'deptduty',
			fieldLabel : '部门职能',
			xtype : 'textarea',
			width : 150,
			anchor : '50%'
		}]
	});

	/*----------------------------------主面板------------------------------------*/
	new Ext.Panel({
		id : 'dept_panel',
		frame : true,
		closeAction : 'hide',
		renderTo : 'tab_nav_dept',
		layout : 'column',
		height : 600,
		autoHeight : false,
		items : [deptTree, deptForm],
		tbar : [{
			id : 'new_dept',
			text : '新建',
			handler : function(btn) {
				// 实现在选定部门节点下新建一个部门的功能
				var deptFormInWin = new Ext.form.FormPanel({});
				deptFormInWin = deptForm.cloneConfig({
							id : 'dept_form_win',
							title : '部门信息编辑',
							closeAction:'hide'
						});
				var formWin = new Ext.Window({
					width : 600,
					height : 400,
					items : [deptFormInWin],
					buttons : [{
								text : '提交',
								handler : function() {
									doSubmit(deptFormInWin, 'new.do?type=dept');
								}
							}, {
								text : '重置',
								handler : deptFormInWin.getForm().reset
							}]
				});
				for (var i = 0; i < fields.length; i++) {
					fields[i].enable();
				}
				formWin.show();
			}
		}, {
			id : 'del_dept',
			text : '删除',
			disabled : true,
			handler : function(btn) {
				// TODO 实现删除选定部门的功能，若没有选定则弹出提示，要求选定部门节点
				var pk_dept = deptTree.getSelectionModel().getSelectedNode().id;
				Ext.Ajax.request({
							url : 'delete.do?type=dept&id=' + pk_dept,
							method : 'GET',
							success : function() {
								Ext.Msg.alert('info', '删除成功');
								deptTree.root.children = false;
								deptTree.root.reload();
							},
							failure : function() {

							}
						});
			}
		}, {
			id : 'edit_dept',
			text : '修改',
			disabled : true,
			handler : function(btn) {
				// TODO 修改当前表单中的部门信息,双击部门树节点时此按钮可用（enable）
				var fields = getFields(deptForm);
				for (var i = 0; i < fields.length; i++) {
					fields[i].enable();
				}
				Ext.getCmp('save_dept').enable();
			}
		}, {
			id : 'save_dept',
			text : '保存',
			disabled : true,
			handler : function(btn) {
				// TODO 保存当前表单中的部门信息,修改按钮触发此按钮可用（enable）
				var pk_dept = deptTree.getSelectionModel().getSelectedNode().id;
				doSubmit(deptForm, 'update.do?type=dept&id=' + pk_dept);
				for (var i = 0; i < fields.length; i++) {
					fields[i].disable();
				}
			}
		}]
	});
	var fields = getFields(deptForm);
	for (var i = 0; i < fields.length; i++) {
		fields[i].disable();
	}
	deptTree.on('click', onClickNode);
	function onClickNode(node) {
		if (!node.isLeaf()) {
			Ext.emptyFn();
		}
		deptForm.form.load({
					url : 'getById.do?type=dept&id=' + node.id,
					method : 'GET',
					success : function(form, action) {
						Ext.getCmp('edit_dept').enable();
						Ext.getCmp('del_dept').enable();
					},
					failure : function(form, action) {

					}
				});
	}
});
// 提交

function doSubmit(formName, path) {
	if (formName.form.isValid()) {
		formName.form.submit({
					url : path,
					method : 'POST',
					waitText : '正在处理你的请求...',
					success : function(form, action) {
						try {
							var flag = action.result.success;
							if (flag === false)
								Ext.Msg.alert('提示', action.result.message);
							else if (flag === true)
								Ext.Msg.alert('提示', action.result.message);
						} catch (e) {
							e.toString();
						}
					},
					failure : function(form, action) {
						try {
							Ext.MessageBox.alert('提示', action.result.message);
						} catch (e) {
							e.toString();
						}
					}
				});
	}
}

// 获得表单的每个字段
function getFields(fPanel) {
	var textArray = fPanel.findByType('textfield');
	var comboArray = fPanel.findByType('combo');
	var comboTreeArray = fPanel.findByType('combotree');
	var areaArray = fPanel.findByType('textarea');
	var fieldsArray = new Array();
	fieldsArray = textArray.concat(comboArray, comboTreeArray,areaArray);
	return fieldsArray;
}