nav_post.js

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

Ext.onReady(function() {
	/*----------------------------------职务树面板------------------------------------*/
	var postTree = new Ext.tree.TreePanel({
				id : 'post_tree',
				title : '职务导航',
				renderTo : 'post_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=post'
						}),
				animate : true,
				border : false,
				autoScroll : true
			});

	/*----------------------------------职务表单面板------------------------------------*/
	var postForm = new Ext.form.FormPanel({
				id : 'post_form',
				title : '职务信息编辑区',
				renderTo : 'post_form',
				frame : true,
				height : 400,
				columnWidth : .75,
				labelAlign : 'right',
				labelWidth : 60,
				defaultType : 'textfield',
				defaults : {
					labelSeparator : ':'
				},
				reader : new Ext.data.JsonReader({
							root : 'data'
						}, ['postname','posttype','postdesc','postgoal','postduty']),
				items : [{
							name : 'postname',
							fieldLabel : '职务名称',
							allowBlank : false,
							anchor : '50%'
						}, new Ext.form.ComboBox({
									hiddenName : 'posttype',
									fieldLabel : '职务类型',
									allowBlank : false,
									width : 125,
									mode : 'local',
									store : new Ext.data.SimpleStore({
												fields : ['value', 'display'],
												data : [['admin', '管理类'],
														['tech', '技术类'],
														['business', '业务类'],
														['function', '职能类'],
														['sales', '销售类']]
											}),
									displayField : 'display',
									valueField : 'value',
									typeAhead : true,
									forceSelection : true,
									selectOnFocus : true,
									triggerAction : 'all'
								}), {
							name : 'postdesc',
							fieldLabel : '职务描述',
							xtype : 'textarea',
							width : 150,
							anchor : '50%'
						}, {
							name : 'postgoal',
							fieldLabel : '职务目标',
							xtype : 'textarea',
							width : 150,
							anchor : '50%'
						}, {
							name : 'postduty',
							fieldLabel : '职务职责',
							xtype : 'textarea',
							width : 150,
							anchor : '50%'
						}]
			});

	/*---------------------------------主面板-----------------------------------*/
	new Ext.Panel({
		id : 'post_panel',
		frame : true,
		closeAction : 'hide',// 保证关闭之后再次点击树节点能够再次显示此界面
		renderTo : 'tab_nav_post',
		layout : 'column',
		height : 600,
		autoHeight : false,
		items : [postTree, postForm],
		tbar : [{
			id : 'new_post',
			text : '新建',
			handler : function(btn) {
				// TODO 实现在选定部门节点下新建一个部门的功能
				/*
				 * for (var i = 0; i < fields.length; i++) { fields[i].enable(); }
				 * var saveBtn = deptForm .findById('save_post');
				 * saveBtn.enable();
				 */
				var postFormInWin = new Ext.form.FormPanel({
					id : 'post_form',
					title : '职务信息编辑区',
					frame : true,
					height : 400,
					columnWidth : .75,
					labelAlign : 'right',
					labelWidth : 60,
					defaultType : 'textfield',
					defaults : {
						labelSeparator : ':'
					},
					items : [{
								name : 'postname',
								fieldLabel : '职务名称',
								allowBlank : false,
								anchor : '50%'
							}, new Ext.form.ComboBox({
										hiddenName : 'posttype',
										fieldLabel : '职务类型',
										allowBlank : false,
										width : 125,
										mode : 'local',
										store : new Ext.data.SimpleStore({
													fields : ['value',
															'display'],
													data : [
															['admin', '管理类'],
															['tech', '技术类'],
															['business', '业务类'],
															['function', '职能类'],
															['sales', '销售类']]
												}),
										displayField : 'display',
										valueField : 'value',
										typeAhead : true,
										forceSelection : true,
										selectOnFocus : true,
										triggerAction : 'all'
									}), {
								name : 'postdesc',
								fieldLabel : '职务描述',
								xtype : 'textarea',
								width : 150,
								anchor : '50%'
							}, {
								name : 'postgoal',
								fieldLabel : '职务目标',
								xtype : 'textarea',
								width : 150,
								anchor : '50%'
							}, {
								name : 'postduty',
								fieldLabel : '职务职责',
								xtype : 'textarea',
								width : 150,
								anchor : '50%'
							}]
				});
				var formWin = new Ext.Window({
							width : 400,
							height : 300,
							items : [postFormInWin],
							buttons : [{
										text : '提交',
										handler : function() {
											doSubmit(postFormInWin,
													'new.do?type=post');
										}
									}, {
										text : '重置',
										handler : postFormInWin.getForm().reset
									}]
						});
				formWin.show();
			}
		}, {
			id : 'del_post',
			text : '删除',
			disabled : true,
			handler : function(btn) {
				// TODO 实现删除选定部门的功能，若没有选定则弹出提示，要求选定部门节点
				var pk_post = postTree.getSelectionModel().getSelectedNode().id;
				Ext.Ajax.request({
							url : 'delete.do?type=post&id=' + pk_post,
							method : 'GET',
							success : function() {
								Ext.Msg.alert('info', '删除成功');
							},
							failure : function() {

							}
						});
			}
		}, {
			id : 'edit_post',
			text : '修改',
			disabled : true,
			handler : function(btn) {
				// TODO
				// 修改当前表单中的部门信息,双击部门树节点时此按钮可用（enable）
				for (var i = 0; i < fields.length; i++) {
					fields[i].enable();
				}
				Ext.getCmp('save_post').enable();
			}
		}, {
			id : 'save_post',
			text : '保存',
			disabled : true,
			handler : function(btn) {
				// TODO 保存当前表单中的部门信息,修改按钮触发此按钮可用（enable）
				var pk_post = postTree.getSelectionModel().getSelectedNode().id;
				doSubmit(postForm, 'update.do?type=post&id=' + pk_post);
				for (var i = 0; i < fields.length; i++) {
					fields[i].disable();
				}
			}
		}]
	});
	var fields = getFields(postForm);
	for (var i = 0; i < fields.length; i++) {
		fields[i].disable();
	}
	postTree.on('click', onClickNode);
	// 树节点点击响应事件
	function onClickNode(node) {
		if (!node.isLeaf()) {
			Ext.emptyFn();
		}
		postForm.form.load({
					url : 'getById.do?type=post&id=' + node.id,
					method : 'GET',
					success : function(form, action) {
						Ext.getCmp('edit_post').enable();
						Ext.getCmp('del_post').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;
}