General function and Module customization system (CFCMMS)-009 display and control of the main interface and menus (1)

General function and Module customization system (CFCMMS)-009 display and control of the main interface and menus (1)
Start with the main interface and menus, the Main tab tab, and some additional settings. A more traditional management software typically includes a top area, a bottom area, a menu bar (Tree menu), and a main operating area. This system is also the case, just add a little more flexible control of the place.　　First of all to see the system interface layout and ExtJS of the corresponding relationship between the class, ExtJS in the function of the surface object has been relatively perfect, and now the development of B/s program and I used to develop the Delphi system components, build a component class, and then directly use. and the main interface, menu-related classes I put in app/view/main/Directory below. Shows some correspondence between classes and interfaces.

The code for Main.js is as follows:

/** * * System's main page. This system is a single page of the schema, all the sub-pages are contained under this control * * Main Page using MVVM schema mode * */ext.define (' App.view.main.Main ', {extend: ' Ext.container.Container ',//The xtype type of the current control, you can use Sub.up (' App-main ') in the child control to find it xtype: ' App-main ',//The file you need here can be loaded after this control loads , which can be understood as asynchronous loading requires: [' App.view.main.MainController ', ' App.view.main.MainModel '],//the files needed here must be loaded before this control is loaded, Can be understood as synchronous loading 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 of the current control and its child controls, that is, the controller for event handling. Controller: ' main ',//The view model of the current control and its child controls, with parameters that control how the interface is displayed. ViewModel: {type: ' main '},//hides or displays the top or bottom area of the control showorhiddentoolbar:null,layout: {type: ' border '//the layout of the main page of the system, this layout of items Must contain a center area},listeners: The method for setting events in the {/* * MVVM is equivalent to the following method. Resize:function (Container) {* Container.getcontroller (). Onmainresize ();} */resize: ' Onmainresize '},//the control distribution on the main page of the system, Mainly includes the top and bottom of the information surface version, the left side of the menu, the middle of the module information display area items: [{xtype: ' Maintop ', Region: ' North '//put it in the mostTop}, {xtype: ' Mainmenutoolbar ', Region: ' North ',//put him under Maintop hidden:true,//Hide bind by default: {hidden: ' {!istoolbarmenu } '//If not the standard menu is hidden}}, {xtype: ' Mainbottom ', Region: ' South '//put it at the bottom}, {xtype: ' mainmenuregion ', reference: ' Mainmenure Gion ', Region: ' West ',//left panel Width:220,collapsible:true,split:true,hidden:false,//The system displays this tree menu by default. Change this to true also, you can see the interface is displayed well, then the process of displaying the menu bind: {hidden: ' {!istreemenu} '}}, {region: ' center ',//middle display panel, is a tabpanel.xtype: ' m Aincenter ', reference: ' Maincenter '}],initcomponent:function () {//Ext shows the log method in the product release file compiled with Sencha cmd, these log statements are automatically deleted. Ext.log (' main view initcomponent ');//Add this control in the app's namespace, and you can use this control in other places app.viewport = This;this.showorhiddentoolbar = Ext.widget (' Showheadertoolbar '); this.callparent (arguments); Call the parent class's initialization Method}});

So the main interface is how to create it, it depends on the Webcontect directory app.js in the statement.

Ext.application ({    name: ' app ',    //Continue ' app. Application '    Extend: ' App. Application ',    requires: [        ' App.view.main.Main '    ],    //Set main view, typically a viewport, which will be automatically created and rendered after loading.    mainView: ' App.view.main.Main '});

The app.js here inherit from/app/application.js.

/** * Application The main control class, the main interface is loaded well after performing the launch function here */ext.loader.setpath (' app ', ' app '); Ext.define (' app. Application ', {extend: ' Ext.app.Application ', Name: ' App ', Views: [],//MVC view// The MVC pattern, which starts with extjs4.0, and MVVM can coexist, now the module is handled in the same way as the MVC method//The following are the MVC controller 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 ... .');/ /Set Button menu when the error is displayed in the console, add this sentence just fine. See Here//https://docs.sencha.com/extjs/6.0/whats_new/6.0.0/extjs_upgrade_guide.html#ButtonExt.enableAriaButtons = false;//If a panel does not have a title set, a warning message will be displayed in the console, plus this will not be ext.enableariapanels = False;},launch:function () {Ext.log ( ' Application launch ... '); Ext.QuickTips.init ();d elete Ext.tip.Tip.prototype.minWidth; Prevent toolTip width is very small, not good to see app.mainregion = This.getcontroller (' mainregion ');//The statement that needs to be executed can be added here// 0.5 seconds after the system is loaded, clear the system is loading the animation and cue information settimeout (function () {Ext.get ("Loading"). Remove ();}, 500);}});

The various creation and execution nodes of the system, together with the Ext.log () function, show some information and can clearly see the loading process and the order of execution.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

General function and Module customization system (CFCMMS)-009 display and control of the main interface and menus (1)