跟我一起学extjs5(12--模块界面的总体设计)

跟我一起学extjs5(12--模块界面的总体设计)


        上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个Grid,在其上方有个操作按钮的工具条,在左边有导航区域,在右边有一个记录明细的显示区域。下面即是一个例子:

跟我一起学extjs5(12--模块界面的总体设计)

        下面我们来搭建这个界面,首先在view中建立目录module,在此目录下建立Module.js,ModuleController.js, moduleModel.js。这三个文件分别为模块的主界面,模块的控制器和模块的数据模型。然后在module下建立目录region,在这个目录下放置模块各个部分的控件,具体的控件和界面对应图如下:
跟我一起学extjs5(12--模块界面的总体设计)

        下面来看看各个部分的代码:Module.js
/**
 * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系
 */
Ext.define('app.view.module.Module', {
	extend : 'Ext.panel.Panel',

	alias : 'widget.modulepanel',

	requires : ['app.view.module.ModuleController', 'app.view.module.ModuleModel'],

	uses : ['app.view.module.region.Navigate', 'app.view.module.region.Grid',
			'app.view.module.region.Detail'],

	controller : 'module',
	// MVVM架构的控制器的名称,main控制器会自动加载,这个控制器不会自动加载,需要在requires中指定,不知道是为什么
	viewModel : {
		type : 'module'
	},
	bind : {
		// glyph : '{tf_glyph}', // 这一个绑定是无效的,在tabPanel渲染过后,再修改这个值,将不会有任何效果。
		title : '{tf_title}' // 这个绑定是有效的,可以根据ModuleModel中的值来设置title
	},
	layout : 'border', // 模块采用border布局

	initComponent : function() {
		this.glyph = this.getViewModel().get('tf_glyph'); // 由于上面的glyph的bind无效,因此需要在这里加入glyph的设置
		this.items = [{
					xtype : 'navigate', // 导航区域
					region : 'west',
					width : 250,
					collapsible : true,
					split : true
				}, {
					xtype : 'modulegrid', // 模块的grid显示区域
					region : 'center'

				}, {
					xtype : 'recorddetail', // 记录明细
					region : 'east',
					width : 250,
					collapsible : true, // 可以折叠隐藏
					collapseMode : 'mini', // 折叠陷藏模式
					split : true
					// 可以拖动大小
			}]

		this.callParent();
	}

})

        ModuleController.js
/**
 * 模块的控制器
 */

Ext.define('app.view.module.ModuleController', {
			extend : 'Ext.app.ViewController',

			requires : ['Ext.MessageBox', 'Ext.window.Toast'],

			alias : 'controller.module',

			init : function() {
				console.log('modulecontroller.init')
			}

		})

        ModuleModel.js
/**
 * 模块的数据模型
 */

Ext.define('app.view.module.ModuleModel', {
			extend : 'Ext.app.ViewModel',
			alias : 'viewmodel.module',

			// 在开发过程中我先用设定好的值放于data中,等以后自定义的时候,data里的值都是从后台取得的
			// 所有数据库里的字段,我都以tf_开头,只是为了表示这是从后台读取过来的

			data : {

				tf_moduleId : '1010', // 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块。
				tf_ModuleGroup : '工程管理',// 模块分组:模块分到哪个组里,比如说业务模块1、业务模块2、系统设置、系统管理等。
				tf_moduleName : 'Global', // 模块标识:系统中唯一的模块的标识
				tf_title : '工程项目',// 模块名称:能够描述此模块信息的名称。
				tf_glyph : 0xf0f7, // 图标字符值
				tf_shortname : null,// 模块简称:如果名称过长,有些地方可以用简称来代替。
				tf_englishName : null,// 模块英文名称:万一要制作英文版,可以用英文名称。
				tf_englishShortName : null, // 模块英文简称:可以用作生成编码字段。
				tf_description : null,// 模块描述:
				tf_remark : null
				// 备注:

				// 下面还有若干字段未加入,以后用到的时候再加入
			}

		})

        下面看看四个模块控件的源码:
        Grid.js
/**
 * 模块数据的主显示区域,继承自Grid
 */

Ext.define('app.view.module.region.Grid', {
			extend : 'Ext.grid.Panel',
			alias : 'widget.modulegrid',
			uses : ['app.view.module.region.GridToolbar'],
			bind : {
				title : '{tf_title}' // 数据绑定到ModuleModel中的tf_title
			},
			dockedItems : [{
						xtype : 'gridtoolbar', // 按钮toolbar
						dock : 'top'
					}],

			// 自定义字段的还没有做,先放几个固定的
			columns : [{
						dataIndex : 'tf_name',
						text : '工程项目名称',
						width : 250
					}, {
						dataIndex : 'tf_budget',
						text : '投资总额'
					}],
			store : new Ext.data.Store({
						fields : ['tf_name', {
									name : 'tf_budget',
									type : 'float'
								}],
						data : [{
									tf_name : '安居房建设工程',
									tf_budget : 1230000
								}, {
									tf_name : '道路建设工程',
									tf_budget : 453092
								}]
					})
		})

        GridToolbar.js
/**
 * 一个模块的grid上面显示的toolbar,里面放置了各种操作按钮 暂时还没有考虑到权限
 */
Ext.define('app.view.module.region.GridToolbar', {
			extend : 'Ext.toolbar.Toolbar',
			alias : 'widget.gridtoolbar',
			uses : ['app.ux.GridSearchField'],
			initComponent : function() {
				this.items = [{
							text : '显示',
							glyph : 0xf022
						}, {
							text : '新增',
							xtype : 'splitbutton',
							glyph : 0xf016,
							menu : [{
										text : '复制新增',
										tooltip : '新增时先将当前记录添入到新记录中',
										glyph : 0xf0c5
									}, '-', {
										text : '上传Excel表单条新增',
										tooltip : '根据指定的excel表添好数据后,上传新增一条记录',
										glyph : 0xf062
									}, {
										text : '上传Excel表批量新增',
										tooltip : '根据下载的Excel表中的要求添加数据后,上传批量新增数据',
										glyph : 0xf062
									}]
						}, {
							text : '修改',
							glyph : 0xf044
						}, {
							text : '删除',
							glyph : 0xf014
						}, '-', {
							glyph : 0xf0c6,
							xtype : 'splitbutton',
							menu : [{
										text : '新增附件',
										icon : 'images/button/additionadd.png',
										glyph : 0xf093
									}, '-', {
										text : '预览所有附件',
										glyph : 0xf03e
									}, '-', {
										text : '下载所有附件',
										glyph : 0xf019
									}]
						}, {
							xtype : 'splitbutton',
							glyph : 0xf0ce,
							menu : [{
										text : '列表导出至excel',
										glyph : 0xf0ce
									}, '-', {
										text : '选中记录导出至excel',
										glyph : 0xf0ce
									}]
						}, {
							xtype : 'splitbutton',
							glyph : 0xf02f,
							menu : [{
										text : '打印当前页',
										glyph : 0xf02f
									}, {
										text : '打印所有记录',
										glyph : 0xf02f
									}]
						}, '-', '筛选', {
							width : 60,
							xtype : 'gridsearchfield',
							store : Ext.create('Ext.data.Store', {
										proxy : {
											type : 'rest'
										}
									})
						}];
				this.callParent();
			}
		})

        Navigate.js
/**
 * 导航区域的主控界面,这是这个系统的核心控件之一
 */

Ext.define('app.view.module.region.Navigate', {
			extend : 'Ext.panel.Panel',
			alias : 'widget.navigate',

			// glyph : 0xf0d0,
			title : '导航',

			initComponent : function() {

				this.callParent();
			}

		})

        Detail.js
/**
 * 选中了grid中的一条记录,显示明细的区域,放在右边
 */

Ext.define('app.view.module.region.Detail', {
			extend : 'Ext.grid.property.Grid',
			alias : 'widget.recorddetail',

			//glyph : 0xf0ca, //加了这一条,那个在最顶右侧可以隐藏此panel的按钮就不见,extjs真是bug一袋子,bug一屋子
			title : '记录明细',

			initComponent : function() {
				this.source = {
					'工程项目名称' : 'title',
					'投资总额' : 2929292
				}
				this.callParent();
			}

		})

 


跟我一起学extjs5(12--模块界面的总体设计),布布扣,bubuko.com

跟我一起学extjs5(12--模块界面的总体设计)

上一篇:FastJson的基本使用


下一篇:js关于propotype的一些事-------Day62