Learn extjs5 with me (12 -- Overall Design of the Module Interface), extjs512 --

Learn extjs5 with me (12 -- Overall Design of the Module Interface), extjs512 --
Learn extjs5 with me (12 -- Overall Design of the Module Interface)
Some elements used in custom modules are designed in the previous section. For the sake of intuition, this section first creates a main interface of the module. Those who have read the Design and Implementation blog of my module Management General function custom system should have some understanding. The main interface of a module is a Grid. There is a toolbar for the operation button above it, a navigation area on the left, and a detailed display area on the right. The following is an example:


Next we will build this interface. First, create the directory module in the view, and then create Module. js, ModuleController. js, and moduleModel. js under this directory. These three files are the module's main interface, the module's controller, and the module's data model. Then, create the region directory under the module, and place the controls of each part of the module under this directory. The specific control and interface figure is as follows:

Next let's take a look at the code of each part: Module. js

/*** The container of the main control interface of a module, which is used to hold controls of each module and coordinate the relationship between them */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', // name of the controller in the MVVM architecture. The main controller is automatically loaded, and this controller is not automatically loaded. You must specify it in requires, I don't know why viewModel: {type: 'module'}, bind: {// glyph: '{tf_glyph}'. // This binding is invalid, after tabPanel rendering, modifying this value 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 () {this. glyph = this. getViewModel (). get ('tf _ glyph'); // because the above glyph bind is invalid, you need to add the glyph setting this here. items = [{xtype: 'navigate', // navigation region: 'west', width: 250, collapsible: true, split: true}, {xtype: 'lelegrid ', // region: 'center'}, {xtype: 'recorddetail ', // record details region: 'east', width: 250, collapsible: true, // hide and collapse the collapseMode: 'mini ', // hide/hide mode split: true // drag size}] this. callParent ();}})

ModuleController. js

/*** Module controller */Ext. define ('app. view. module. moduleController ', {extend: 'ext. app. viewController ', requires: ['ext. messagebox', 'ext. window. toast '], alias: 'controller. module ', init: function () {console. log ('lelecontroller. init ')}})

ModuleModel. js

/*** 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 background // all fields in the database. I start with tf _ to indicate that this is the data: {tf_moduleId: '20140901', // module ID: the ID number of a number. You can place modules of the same group in the order of ID numbers. Tf_ModuleGroup: 'Project management', // module grouping: group to which the module is assigned, such as business module 1, business module 2, system settings, and system management. Tf_moduleName: 'global', // module identifier: the identifier of a unique module in the system. tf_title: 'Project Project', // Module name: the name that can describe the module information. Tf_glyph: 0xf0f7, // The icon character value tf_shortname: null, // module Abbreviation: if the name is too long, it can be replaced by 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 below, and will be added later when used }})

Let's take a look at the source code of the four module controls: Grid. js

The main display area of the/*** module data, inherited from 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} '// bind data to tf_title} In ModuleModel, dockedItems: [{xtype: 'gridtoolbar', // click toolbardock: 'top'}], // The Custom field has not been created. First, put several fixed columns: [{dataIndex: 'tf _ name', text: 'Project project name ', width: 250 },{ dataIndex: 'tf _ budget ', text: 'total investment'}], store: new Ext. data. store ({fields: ['tf _ name', {name: 'tf _ budget ', type: 'float'}], data: [{tf_name: 'housing construction Project', tf_budget: 1230000 },{ tf_name: 'road construction Project', tf_budget: 453092}]})

GridToolbar. js

/*** The toolbar displayed on the grid of a module, which contains various operation buttons. permissions are not yet taken into account */Ext. define ('app. view. module. region. gridToolbar ', {extend: 'ext. toolbar. toolbar ', alias: 'widget. gridtoolbar ', uses: ['app. ux. gridSearchField '], initComponent: function () {this. items = [{text: 'display', glyph: 0xf022}, {text: 'add', xtype: 'splitting', glyph: 0xf016, menu: [{text: 'Copy add', tooltip: 'add the current record to the new record first ', glyph: 0xf0c5},'-', {text: 'upload an Excel form entry add ', tooltip: 'After adding data based on the specified excel table, upload a new record ', glyph: 0xf062}, {text: 'upload Excel table batch add', tooltip: 'After adding data according to the requirements in the downloaded Excel table, upload batch add data ', glyph: 0xf062}]}, {text: 'modify', glyph: 0xf044}, {text: 'delete', glyph: 0xf014}, '-', {glyph: 0xf0c6, xtype: 'splitting', menu: [{text: 'add attachment ', icon: 'images/button/additionadd.png ', glyph: 0xf093},'-', {text: 'preview all attachments', glyph: 0xf03e}, '-', {text: 'Download all uploads', glyph: 0xf019}]}, {xtype: 'splitte', glyph: 0xf0ce, menu: [{text: 'list exported to excel', glyph: 0xf0ce}, '-', {text: 'export selected records to excel ', glyph: 0xf0ce}]}, {xtype: 'splitbutton', glyph: 0xf02f, menu: [{text: 'print current page', glyph: 0xf02f}, {text: 'print all records', glyph: 0xf02f}]}, '-', 'filter ', {width: 60, xtype: 'gridsearchfield ', store: Ext. create ('ext. data. store', {proxy: {type: 'Rest'})}]; this. callParent ();}})

Navigate. js

/*** Main control interface of the navigation area, which is one of the core controls of the system */Ext. define ('app. view. module. region. navigate', {extend: 'ext. panel. panel ', alias: 'widget. navigate', // glyph: 0xf0d0, title: 'navigator', initComponent: function () {this. callParent ();}})

Detail. js

/*** Select a record in the grid, and display the detailed area. Put it on the right */Ext. define ('app. view. module. region. detail ', {extend: 'ext. grid. property. grid ', alias: 'widget. recorddetail ', // glyph: 0xf0ca, // the button that can hide the panel on the top right is missing. extjs is a bug bag, bug room title: 'Recording details', initComponent: function () {this. source = {'Project name': 'title', 'total investment ': 2929292} this. callParent ();}})

 


12 Which of the following is NOT the overall design of the system? () modular concept B U/C matrix C functions module diagram D information system flowchart

C
 
Who has the teaching design of the sixth module Hellen Keller of 12 new standards,