OA项目（部门管理模块）上

一、模块功能介绍

1）视图模块如图：

 2）添加部门功能

3）编辑部门功能

4）查询搜索功能

 

 5）删除功能 

 这里为了更好展示，先把每页调整10条记录

删除前：

删除提示：

删除后：

---

 二、前端设计

1）列表视图层代码，新建 webapp / app / view / department / List.js , 内容如下：

Ext.define('OA.view.department.List', {
	extend : 'Ext.grid.Panel',
	alias : 'widget.departmentlist',
	layout : 'fit',
	id : 'departmentlist',
	store : 'Departments',
	selModel : Ext.create('Ext.selection.CheckboxModel'),
	//定义顶部按钮
	tbar : {
		xtype : 'toolbar',
		items : [ {
			text : '添加',
			iconCls : 'icon-add',
			action : 'onAddClick'
		}, '-', {
			text : '删除',
			iconCls : 'icon-delete',
			action : 'onDeleteClick'
		}]
	},
	bbar : [{
			xtype : 'pagingtoolbar',
			store : 'Departments',
			dock : 'bottom',
			displayMsg : '显示 {0} - {1} 条记录，总共 {2} 条记录',
			beforePageText : "第",
			afterPageText : "页,共 {0} 页",
			displayInfo : true
	} ],
	columns : [ {
		header : 'ID',
		dataIndex : 'id',
	}, {
		header : '部门名称',
		dataIndex : 'name',
		flex : 1
	}, {
		header : '上级部门名称',
		dataIndex : 'parent.name',
		flex : 1
	}, {
		header : '职能说明',
		dataIndex : 'description',
		flex : 1
	} ],
	features: [
        {
            ftype: 'searching',
            minChars: 2,
            width: 150,
            mode: 'remote',//远程还是本地store
            position: 'top/bottom',//状态栏还是工具栏
            iconCls: 'icon-zoom',//图标
            menuStyle: 'checkbox/radiobox',//单选还是多选
            showSelectAll: true,   //是否显示全选按钮
            checkIndexes: [],       //默认是否选择所有的列
        }
    ],  
});

2）新建 / 修改 功能弹出窗口视图代码，新建 webapp / app / view / department / DepartmentManagerWindow.js ,内容如下：

Ext.define('OA.view.department.DepartmentManagerWindow', {
	extend: 'Ext.window.Window',
	alias: "widget.departmentmanagerwindow",
	id: 'departmentmanagerwindow',
	title: '添加部门',
	
	layout: 'fit',
	autoShow: true,
	width: 300,
	height: 200,
	bodyPadding : '10 5',
	modal : true,
	initComponent: function(){
		this.items = [{
			xtype: 'form',
			fieldDefaults : {
				labelAlign : 'left',
				labelWidth : 90,
				anchor : '100%'
			},
			items: [{
				xtype: 'textfield',
				name: 'id',
				fieldLabel: "ID",
				readOnly : true
			}, {
//				xtype:'textfield',
//				name: 'parent.name',
//				fieldLabel: "上级部门名称"
				xtype: 'comboboxtree',
				name: 'parent.id',
				fieldLabel: '上级部门',
				labelWidth: 90,
		        storeUrl: 'departmentActionGetDeptTree.action',
		        showDetail: true,       //true：显示叶子节点；false：不显示叶子节点
		        /* selectModel配置项说明：
		            all:所有结点都可选中；
		            exceptRoot：除根结点，其它结点都可选（默认）；
		            folder:只有目录（非叶子和非根结点）可选；
		            leaf：只有叶子结点可选
		                                    不设置selectModel或者乱设置：所有节点不带check；只能单选
		        */
		        selectModel: 'abc',
		        checkModel: 'single',   //single 为单选模式，设置multiple为多选（仅限于带复选框的树）
		        cascade: 'child',       //级联方式:1.child子级联;2.parent,父级联,3,both全部级联
		        rootVisible: true,
		        rootText: '所有部门'
			}, {
				xtype:'textfield',
				name: 'name',
				fieldLabel: "部门名称"
			}, {
				xtype:'textfield',
				name: 'description',
				fieldLabel: "职能说明"
			}]
		}];
		
		this.buttons =