Learn extjs5 with me (36 -- Design of a single module [4. Create a corresponding module based on the menu])

Learn extjs5 with me (36 -- Design of a single module [4. Create a corresponding module based on the menu])
Learn extjs5 with me (36 -- Design of a single module [4. Create a corresponding module based on the menu])
The background has been processed in the previous sections, and now the foreground has to be processed. First, you need to modify the menu selection event and pass the moduleName parameter when creating a module. Modify the functions in MainController. js:

// Select the menu on the main menu and run onMainMenuClick: function (menuitem) {var maincenter = this. getView (). down ('maincenter'); maincenter. setActiveTab (maincenter. add ({xtype: 'lelepanel ', // add the "module name" of the selected menu to the parameter moduleName: menuitem. moduleName, closable: true, reorderable: true }));}

Modify Module. js so that it can perform initialization Based on the passed Module name.

// Remove this configuration and place the corresponding settings in initComponent // viewModel: {// type: 'module' //}, bind: {// glyph: '{tf_glyph}', // This binding is invalid. modifying this value after tabPanel rendering will not have any effect. Title: '{tf_title}' // This binding is valid. You can set the title} and layout: 'border' based on the value in the ModuleModel. // The module uses the border layout initComponent: function () {console. log (this. moduleName + 'Creating '); // obtain the definition data of the current module from MainModel, including fields and various settings var mainmodel = this. up ('app-main '). getViewModel (); var viewmodel = new Ext. create ('app. view. module. moduleModel ', {// pass the definition information of this module to the viewModelmodule: mainmodel of this module. getModuleDefine (this. moduleName)}); this. setViewModel (viewmodel );

In the above Code, the attribute configuration of viewModel is removed first, and then all parameters of the module are obtained based on the passed moduleName during initComponent, and ViewModel is created. And then assign it to you.
Modify the ModuleModel. js file to the following: delete all initialization values in data, add a constructor, and assign the module information to data.

/*** Data model of the module */Ext. define ('app. view. module. moduleModel ', {extend: 'ext. app. viewModel ', alias: 'viewmodel. module ', // during the development process, I first put the set value in data. When you customize it later, the values in data are obtained from the backend // all fields in the database. I start with tf _ to indicate that this is the constructor: function () read from the backend () {Ext. log ('module constructor'); var me = this; // this sentence is critical. If not, this has not been initialized. The following Ext. apply (me. data ,....) this sentence will cause an error. callParent (arguments); // obtain MainModel. the initialization information console of this module obtained in js. Log (this. module); Ext. apply (this. data, this. module)}, data: {tf_moduleId: null, // module ID: ID of a number. You can place modules of the same group in the same order. Tf_ModuleGroup: null, // module group: group to which the module is assigned, such as business module 1, business module 2, system settings, and system management. Tf_moduleName: null, // module identifier: the identifier of the unique module in the system tf_title: null, // Module name: the name that can describe the module information. Tf_glyph: null, // The character value of the icon tf_shortname: null, // module Abbreviation: if the name is too long, it can be replaced by the abbreviation in some places. Tf_englishName: null, // English name of the module: in case you want to make an English version, you can use an English name. Tf_englishShortName: null, // module Abbreviation: can be used to generate encoding fields. Tf_description: null, // module Description: tf_remark: null, // remarks: // there are still a number of fields not added, and tf_primaryKey: null will be added for later use, // primary key tf_nameFields: null, // fields that can be used to describe the record // custom fields of this module, which are manually defined here, and then automatically obtained from the database: [], // The grid scheme of the module. You can define multiple schemes tf_gridSchemes: [], // The form scheme of the module, and multiple schemes tf_formSchemes: [], selectedNames: ''// the names of the selected record is displayed on the title}. formulas: {// whether Combo displays gridSchemeHidden: function (get) {return this. get ('tf _ gridSchemes '). length <= 1 ;}}, // locate the corresponding 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 above steps, you can see the results. After entering the system, select "module group" in the menu, and the following interface is displayed:



Before that, we finally had a little association between the front and back of the module. We slowly built the platform and used it to complete other configuration tasks. When CRUD is ready, you can directly modify the configuration information of various databases on the front-end.