Learn Extjs5 with me. (36--design of individual modules [4 building corresponding modules according to the menu])

Learn Extjs5 with me. (36--design of individual modules [4 building corresponding modules according to the menu])
The first few sections have handled the backstage, and now we have to deal with the foreground.        The first thing to do is to modify the menu selection event and pass the ModuleName parameter when creating a module. To modify a function in Maincontroller.js:

After you select the menu on the main menu, execute Onmainmenuclick:function (MenuItem) {var maincenter = This.getview (). Down (' Maincenter '); Maincenter.setactivetab (Maincenter.add ({xtype: ' Modulepanel ',//Add the "module name" of the current selected menu to the parameter modulename: Menuitem.modulename,closable:true,reorderable:true}));}

Then modify the module.js so that it can perform some initialization work based on the module name passed in.

This configuration is removed, the corresponding settings are placed in the InitComponent//ViewModel: {///Type: ' Module '//},bind: {//Glyph: ' {tf_glyph} ',//This binding is not valid in tab After the panel renders, modifying this value will have no effect. Title: ' {tf_title} '//This binding is valid and can be set according to the value in Modulemodel title},layout: ' Border ',//module with Border layout initcomponent:function ( {Console.log (This.modulename + ' is being created ');//Get the definition data of the current module from Mainmodel, including the fields and information about the various settings var Mainmodel = this.up (' App-main '). Getviewmodel (); var viewmodel = new Ext.create (' App.view.module.ModuleModel ', {//) pass the module's definition information to the viewmodelmodule of this module: Mainmodel.getmoduledefine (This.modulename)}); This.setviewmodel (ViewModel);

In the above section of the code, the configuration of the ViewModel property is removed, and then, when InitComponent, the ModuleName is passed in to get all the parameters of the module and create the ViewModel. And then assign it to yourself.
Then modify the Modulemodel.js file to the following, mainly delete the initialization value in data, and then add a constructor constructor, in the constructor to assign the information of the module to data.

/** * Module Data Model */ext.define (' App.view.module.ModuleModel ', {extend: ' Ext.app.ViewModel ', alias: ' Viewmodel.module ',// In the development process, I first set the value in the data, and so on later customization, the value of data is from the background obtained from//all the database fields, I started with tf_, just to indicate that this is read from the background constructor:function () { Ext.log (' module constructor '); var me = this;//This sentence is the key, if not, this is not initialized to complete, the following ext.apply (Me.data,....) This sentence will be wrong this.callparent (arguments);//obtain initialization information of the module obtained in Mainmodel.js Console.log (this.module); Ext.apply (This.data, This.module)},data: {tf_moduleid:null,//module ID number: The ID number of a number that can be placed in a block of the same grouped module according to the order of this ID number. tf_modulegroup:null,//Module Group: the module into which group, such as Business Module 1, Business Module 2, system settings, System management. Tf_modulename:null,//module identification: Identification of the unique module in the System tf_title:null,//module name: The name that can describe the information of this module. Tf_glyph:null,//Icon character value tf_shortname:null,//module abbreviation: If the name is too long, some places can be replaced by abbreviations. tf_englishname:null,//Module English Name: In case you want to make English version, you can use the English name. Tf_englishshortname:null,//module abbreviation: Can be used as a generated encoding field. tf_description:null,//Module Description: tf_remark:null,//NOTE://Below There are several fields are not joined, the later use of the time to add tf_primarykey:null,//primary key Tf_namefields:n ull,//can be used to describe the field of record//custom field of this module, which is first defined by hand,After replacing the tf_fields from the database automatically: [],//module's grid scheme, you can define multiple scenarios tf_gridschemes: [],//module's form scheme, you can define multiple scenarios tf_formschemes: [], Selectednames: The names of the selected record is displayed on the title},formulas: {//module grid Scheme Selection combo show gridschemehidden:function (get) {return T His.get (' tf_gridschemes '). Length <= 1;}},//based on the field ID, locate the corresponding definition of the field getfielddefine:function (FieldID) {var result = null; Ext.Array.each (This.data.tf_fields, Function (field) {if (Field.tf_fieldid = = FieldID) {result = Field;return false;}}); return result;}})

After the steps above, you can see the results. After entering the system, select the "Module grouping" menu in the menu, the following interface is displayed:

To the front, finally have a little bit of the module before and after the link, slowly build this platform, and use this platform to complete other setup tasks. By the time the crud is ready, you can modify the configuration information in the various databases directly at the foreground.

Learn Extjs5 with me. (36--design of individual modules [4 building corresponding modules according to the menu])