nav_emptype.js

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

Ext.onReady(function() {
	/*----------------------------人员类别列表树------------------------------*/
	var emptypeTree = new Ext.tree.TreePanel({
				id : 'emptype_tree',
				title : '职务导航',
				renderTo : 'emptype_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=emptype'
						}),
				animate : true,
				border : false,
				autoScroll : true
			});

	/*----------------------------人员类别表单------------------------------*/
	var emptypeForm = new Ext.form.FormPanel({
				id : 'emptype_form',
				renderTo : 'emptype_form',
				frame : true,
				height : 400,
				columnWidth : .75,
				labelAlign : 'right',
				labelWidth : 60,
				defaultType : 'textfield',
				defaults : {
					labelSeparator : ':'
				},
				bodyStyle : 'padding:5px 5px 0',
				reader : new Ext.data.JsonReader({
							root : 'data'
						}, ['typecode', 'typename', 'typedesc']),
				items : [{
							id : 'emptype_fieldset',
							name : 'emptype',
							title : '类别信息编辑',
							xtype : 'fieldset',
							defaultType : 'textfield',
							collapsible : false,
							autoHeight : true,
							defaults : {
								width : 180
							},
							items : [{
										name : 'typecode',
										fieldLabel : '类别编码',
										allowBlank : false
									}, {
										name : 'typename',
										fieldLabel : '类别名称',
										allowBlank : false
									}, {
										name : 'typedesc',
										fieldLabel : '类别描述',
										allowBlank : false
									}]
						}]
			});
	var fields = getFields(emptypeForm);
	for (var i = 0; i < fields.length; i++) {
		fields[i].disable();
	}
	/*----------------------------主面板-----------------------------------*/
	new Ext.Panel({
		renderTo : 'tab_nav_emptype',
		frame : true,
		closeAction:'hide',//保证关闭之后再次点击树节点能够再次显示此界面
		layout : 'column',
		height : 600,
		autoHeight : false,
		items : [emptypeTree, emptypeForm],
		tbar : [{
			id : 'new_emptype',
			text : '新建',
			handler : function(btn) {
				// 实现新建一个人员类别的功能
				var emptypeFormInWin = new Ext.form.FormPanel({});
				emptypeFormInWin = emptypeForm.cloneConfig({
							id : 'emptype_form_win',
							title : '人员类别信息录入'
						});
				var formWin = new Ext.Window({
							width : 400,
							height : 300,
							items : [emptypeFormInWin],
							buttons : [{
										text : '提交',
										handler : function() {
											doSubmit(emptypeForm,
													'new.do?type=emptype');
										}
									}, {
										text : '重置',
										handler : emptypeFormInWin.getForm().reset
									}]
						});
				formWin.show();
			}
		}, {
			id : 'del_emptype',
			text : '删除',
			disabled : true,
			handler : function(btn) {
				// TODO 实现删除选定部门的功能，若没有选定则弹出提示，要求选定部门节点
				var pk_emptype = emptypeTree.getSelectionModel().getSelectedNode().id;
				Ext.Ajax.request({
							url : 'delete.do?type=emptype&id=' + pk_emptype,
							method : 'GET',
							success : function() {
								Ext.Msg.alert('info', '删除成功');
							},
							failure : function() {
								Ext.Msg.alert('info', '删除失败');
							}
						});
			}
		}, {
			id : 'edit_emptype',
			text : '修改',
			disabled : true,
			handler : function(btn) {
				// TODO
				// 修改当前表单中的部门信息,双击部门树节点时此按钮可用（enable）
				for (var i = 0; i < fields.length; i++) {
					fields[i].enable();
				}
				Ext.getCmp('save_emptype').enable();
			}
		}, {
			id : 'save_emptype',
			text : '保存',
			disabled : true,
			handler : function(btn) {
				// TODO 保存当前表单中的部门信息,修改按钮触发此按钮可用（enable）
				var pk_emptype = emptypeTree.getSelectionModel().getSelectedNode().id;
				doSubmit(emptypeForm, 'update.do?type=emptype&id=' + pk_emptype);
				for (var i = 0; i < fields.length; i++) {
					fields[i].disable();
				}
			}
		}]
	});
	emptypeTree.on('click', onClickNode);
	// 树节点点击响应事件
	function onClickNode(node) {
		if (!node.isLeaf()) {
			Ext.emptyFn();
		}
		emptypeForm.form.load({
					url : 'getById.do?type=emptype&id=' + node.id,
					method : 'GET',
					success : function(form, action) {
						Ext.getCmp('edit_emptype').enable();
						Ext.getCmp('del_emptype').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;
}