OA项目（增删改查功能基本实现---下）

二、岗位管理模块的 CRUD

步骤1、编写岗位管理列表的界面（webapp / app / view / role / List.js），内容如下：

Ext.define('OA.view.role.List', {
	extend: 'Ext.grid.Panel',
	alias: 'widget.rolelist',
	layout : 'fit',
	id : 'rolelist',
	store: 'Roles',
	selModel : Ext.create('Ext.selection.CheckboxModel'),
	//定义顶部按钮
	tbar: {				
		xtype: 'toolbar',
		items: [{
			text: '添加',
			iconCls : 'icon-add',
			action: 'onAddClick'
				
		},'-',{
			text: '删除',
			iconCls : 'icon-delete',
			action: 'onDeleteClick'
		}]
	},
//	dockedItems: [{
	bbar: [{
		xtype: 'pagingtoolbar',
		store: 'Roles',   
		dock: 'bottom',
		displayMsg: '显示 {0} - {1} 条记录，总共 {2} 条记录',
		beforePageText: "第",
	    afterPageText: "页,共 {0} 页",
		displayInfo: true
	}],
	columns: [{
		header: 'ID',
		dataIndex: 'id',
	}, {
		header: '岗位',
		dataIndex: 'name',
		flex: 1
	}, {
		header: '岗位描述',
		dataIndex: 'description',
		flex: 1
	}],
	
});

PS：①、 tbar 定义顶部工具栏

        ②、bbar 定义底部工具栏，里面要传入 store，用于分页

步骤2、编写 store层组件（webapp / app / store / Roles.js） 内容如下：

Ext.define('OA.store.Roles', {
	extend: 'Ext.data.Store',
	model: 'OA.model.Role',
	id : 'roleStore',
	pageSize: 3,
	autoLoad: true,
	proxy: {
		type: 'ajax',  // 发送 ajax 请求
		api: {
			read: 'roleActionListByPage.action',	// 请求分页查询的 URL		
		},
		reader: {
			type:'json',        // 返回 JSON 格式数据
			root: 'roles',      // 指定数组（集合）的 key
            totalProperty: 'totalCount'  // 指定返回总记录数的 key
		}
	}
	
});

PS：①、 pageSize：3 表示每一页3条记录，在发送ajax 请求时会变成 limit=3 传入给后台

        ②、autoLoad : true, 表示创建组件的时候就加载数据

步骤3、编写 model 层组件（webapp / app / model / Role.js），内容如下：

Ext.define('OA.model.Role', {
	extend: 'Ext.data.Model',
	
	fields: ['id', 'name', 'description']
	
});

步骤4、编写 view层组件（webapp / app / view / role / RoleManagerWindow.js），内容如下：

Ext.define('OA.view.role.RoleManagerWindow', {
	extend: 'Ext.window.Window',
	alias: "widget.rolemanagerwindow",
	id: 'rolemanagerwindow',
	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: 'name',
				fieldLabel: "岗位"
			}, {
				xtype:'textfield',
				name: 'description',
				fieldLabel: "岗位描述"
			}]
		}];
		
		this.buttons = [