常规功能和模块自定义系统 (cfcmms)—009主界面和菜单的展示和控制(1)

常规功能和模块自定义系统 (cfcmms)—009主界面和菜单的展示和控制(1)

　　先从主界面和菜单、主tab标签以及一些附加的设置说起。

 　　一个比较传统的管理软件中，一般会包括一个顶部区域、底部区域、菜单条（树状菜单）和主操作区域。本系统亦是如此，只是增加了一点灵活控制的地方。首先来看看本系统中的界面布局和extjs的类之间的对应关系，extjs中的面象对象的功能已经比较完善了，现在开发b/s程序就和我以前用组件开发delphi系统差不多，建好一个个组件类，然后直接使用即可。

　　和主界面、菜单相关的类大我都放在app/view/main/目录之下。下图展了类和界面的一些对应关系。

　 　Main.js的代码如下：

/** *  * 系统的主页面。本系统是一个单一页面的架构，所有的子页面都是包含在此控件之下 *  * 主页面采用MVVM的架构模式 *  */Ext.define('app.view.main.Main', {extend : 'Ext.container.Container',// 当前控件的xtype类型，在子控件中可以使用 sub.up('app-main') 来找到它xtype : 'app-main',// 这里需要的文件可以在此控件加载之后再加载,可理解为异步加载requires : [ 'app.view.main.MainController', 'app.view.main.MainModel' ],// 这里需要的文件必须在此控件加载之前加载好,可理解为同步加载uses : [ 'app.view.main.region.Center', 'app.view.main.region.Top','app.view.main.region.Bottom', 'app.view.main.menu.MainMenuToolbar','app.view.main.region.Left' ],id : 'appviewport',// 当前控件和其子控件的控制器，也就是事件处理的控制器。controller : 'main',// 当前控件和其子控件的视图模型，里面有控制界面如何显示的参数。viewModel : {type : 'main'},// 隐藏或显示顶部或底部区域的控件showOrHiddenToolbar : null,layout : {type : 'border' // 系统的主页面的布局,这个布局的items里必须包含一个center区域},listeners : {/* * MVVM中设置事件的方法，等价于下面的方法。 resize : function(container) { * container.getController().onMainResize(); } */resize : 'onMainResize'},// 系统主页面里面的控件分布，主要包括顶部和底部的信息面版，左边的菜单面版，中间的模块信息显示区域items : [ {xtype : 'maintop',region : 'north' // 把它放在最顶上}, {xtype : 'mainmenutoolbar',region : 'north', // 把他放在maintop的下面hidden : true, // 默认隐藏bind : {hidden : '{!isToolbarMenu}' // 如果不是标准菜单就隐藏}}, {xtype : 'mainbottom',region : 'south' // 把它放在最底下}, {xtype : 'mainmenuregion',reference : 'mainmenuregion',region : 'west', // 左边面板width : 220,collapsible : true,split : true,hidden : false, // 系统默认是显示此树状菜单。这里改成true也可以，你就能看到界面显示好后，再显示菜单的过程bind : {hidden : '{!isTreeMenu}'}}, {region : 'center', // 中间的显示面版，是一个tabPanel.xtype : 'maincenter',reference : 'maincenter'} ],initComponent : function() {// Ext中显示log的方法，在用sencha cmd编译的产品发布文件中，会自动删除这些log语句。Ext.log('main view initComponent');// 在app的命名空间里加入此控件，在其他地方可以直接使用此控件app.viewport = this;this.showOrHiddenToolbar = Ext.widget('showheadertoolbar');this.callParent(arguments); // 调用父类的初始化方法}});

　　那么这个主界面是被如何创建的呢，这就要看WebContect目录下的app.js中的语句了。

Ext.application({    name: 'app',    // 继续承 'app.Application'    extend: 'app.Application',    requires: [        'app.view.main.Main'    ],    // 设置主View,一般是一个viewport , 在加载好后会自动创建此控件并进行渲染    mainView: 'app.view.main.Main'});

　　这里的app.js继承自/app/Application.js。

/** * Application的主控类，主界面加载好后执行这里的 launch 函数 */Ext.Loader.setPath('app', 'app');Ext.define('app.Application', {extend : 'Ext.app.Application',name : 'app',views : [], // MVC用到的view// 从extjs4.0开始加入的mvc模式，其和mvvm可以共存，现在模块的处理方式还是使用的mvc方式// 下面这些都是mvc的控制器controllers : [ 'MainRegion', 'Module', 'ModuleForm', 'ModuleToolbar','ModuleAdditionFunction', 'GridNavigate', 'GridNavigateTree','Attachment', 'Auditing', 'Approve', 'report.Report','report.DateSectionSelect', 'report.NavigateSelectFieldsTree','report.ResultListGridToolbar' ],stores : [],models : [],requires : [],uses : [],init : function() {Ext.log('Application init......');// 设置button menu 的时候在console中显示错误，加了这句就好了。// 参阅此处// https://docs.sencha.com/extjs/6.0/whats_new/6.0.0/extjs_upgrade_guide.html#ButtonExt.enableAriaButtons = false;// 如果一个 panel 没有设置title，会在console里面显示一个警告信息，加上这个就没了Ext.enableAriaPanels = false;},launch : function() {Ext.log('Application launch......');Ext.QuickTips.init();delete Ext.tip.Tip.prototype.minWidth; // 防止tooltip的宽度很小，不好看app.mainRegion = this.getController('MainRegion');// 需要执行的语句可以加在此处// 系统加载完成后0.5秒，清除系统正在加载的动画和提示信息setTimeout(function() {Ext.get("loading").remove();}, 500);}});

　　在系统的各个创建和执行节点加上Ext.log()函数来显示一些信息，可以清楚的看到加载过程和执行顺序。