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

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

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

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

下面来看看各个部分的代码: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--模块界面的总体设计)

时间: 2024-10-29 19:11:50

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

跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])

跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单]) 这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单. 按钮菜单和标准菜单的数据格式是一样的,生成的函数都在MainModel.js中,下面将其改一下: // 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = [], me = this; Ext.Array.each(this.get('tf

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块)

跟我一起学extjs5(13--执行菜单命令在tabPanel中显示模块) 上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.A

跟我一起学extjs5(41--增加一个自定义模块(源码下载)[2销售合同加入菜单和模块展示])

跟我一起学extjs5(41--增加一个自定义模块[2销售合同加入菜单和模块展示]) 在前面一节销售合同模块的信息导入系统后,需要在菜单中加入这个模块,但是现在菜单模块没法利用此系统进行编辑(多模块的层次现在还没有加入),因此只能在数据库里加入一条记录了: 加入后,重新启动一下tomcat,进入系统,就能在菜单"合同管理"下,看到 "销售合同"的菜单条了,点击一下,看看结果吧. 以上是自动生成"销售合同"的模块界面,这个就是最初介绍的模块的列表.

跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块])

跟我一起学extjs5(36--单个模块的设计[4根据菜单建立相应的模块]) 前几节处理好了后台,现在又要处理前台了.首先是要修改菜单的选择事件,在创建一个module的时候将 moduleName参数传递进去. 修改MainController.js中的函数: // 选择了主菜单上的菜单后执行 onMainMenuClick : function(menuitem) { var maincenter = this.getView().down('maincenter'); maincenter

跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])

跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示]) 上一节已经把到现在为止的后台做好了,启动tomcat ,在浏览器中打入网址:http://localhost:8888/app/applicationinfo.do,就可以取得系统参数值.下面看一下在chrome调试器中的结果. 到此为止,后台暂告一段落,又要开始对前台的extjs的程序进行修改了. 首先要修改的是MainModel.js,在此js文件中加入构造函数: constructor : func

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])

跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据]) 写了几个月,总算有点盼头了,最终要从后台取得数据了.后台的spring mvc 和 service 仅仅能简单的说说了,里面加了几十个类.有兴趣的下载了源代码自己看.以下画张通用的模块列表取数据的流程,这个流程是适用于全部的模块.我这个后台处理程序也是对全部的模块进行统一处理,包含数据查找,新增,改动,删除都是同样的. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==

跟我一起学extjs5(11--自定义模块的设计)

跟我一起学extjs5(11--自定义模块的设计) 从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下信息: 1.模块的基本信息 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块. 模块分组:模块分到哪个组里,比如说业务模块1.业务模块2.系统设置.系统管理等. 模块标识:系统中唯一的模块的标识,一般这个标识等同于数据库

跟我一起学extjs5(05--主界面上加入顶部和底部区域)

跟我一起学extjs5(05--主界面上加入顶部和底部区域) 这一节为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ext.define('app.view.main.MainModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.main', data : { name : 'app',

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成])

跟我一起学extjs5(30--加入模块和菜单定义[3后台系统数据的组织和生成]) 对于大多web程序来说,后台是完成控制和处理的,前台就是一个展示工具,这个系统也是这样.在上一节中建立了四个模块,下面开始设计前后台的交互.将系统信息和模块.菜单信息传到前台,由前台来进行展示. 首先新建一个java bean类用来存放各种需要传到前台的数据,里面包括:系统信息.操作人员信息.服务人员信息.模块信息.菜单.现在只加入了这几个,以后还要加入各种 各样的权限设置.在com.jfok.server.co