Learn Extjs5 with me (overall design of 12--module interface)

Learn Extjs5 with me (overall design of 12--module interface)
in the previous section, some of the features used in the module customization were designed, and for the sake of visualization, this section first establishes a module's main interface. You've seen me. Design and implementation of custom system for module Management General function Blog People should know something about it. The main interface of a module is a grid, a toolbar with an action button above it, a navigation area on the left, and a display area on the right with a record detail. Here is an example:


Let's build this interface, first set up the directory module in view, in this directory to establish Module.js,modulecontroller.js, modulemodel.js. These three files are the module's main interface, the module's controller and the module's data model. Then under the module to create a directory region, in this directory to place the various parts of the control, the specific control and interface map is as follows:

Here 's a look at the code for each part: Module.js

/** * A container for the master interface of a module that is used to place individual module controls and coordinate their relationships */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 ',//The name of the controller of the MVVM schema, the main controller will automatically load, this controller will not be loaded automatically, need to be specified in requires, do not know why ViewModel: {type: ' module '},bind: {//Glyph : ' {tf_glyph} ',//This binding is not valid, and after TabPanel rendering, 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 ( {this.glyph = This.getviewmodel (). Get (' tf_glyph ');//Because the above glyph bind is invalid, you need to add glyph settings Here This.items = [{xtype: ' Navigate ',//Navigation area region: ' West ', width:250,collapsible:true,split:true}, {xtype: ' Modulegrid ',//module's grid display area Regio N: ' center '}, {xtype: ' recorddetail ',//Record detail region: ' East ', width:250,collapsible:true,//Can be collapsed hidden collapsemode: ' mi Ni ',// Collapse Trap Mode split:true//can 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 (' Modulecontroller.init ')})

Modulemodel.js

/** * 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 the//all the database fields, I started with tf_, just to indicate that this is read from the background data: {tf_moduleid: ' 1010 ',/ /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 the ID number. Tf_modulegroup: ' Project Management ',//Module grouping: The module into which group, such as Business Module 1, Business Module 2, system settings, System management. Tf_modulename: ' Global ',//module identification: Identification of the only module in the system tf_title: ' Project ',//module name: The name that can describe this module information. TF_GLYPH:0XF0F7,//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 a number of fields are not added, and later when used to add}})

Here's a look at the source code for 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} '//data bound to Modulemodel tf_ Title},dockeditems: [{xtype: ' Gridtoolbar ',//button Toolbardock: ' Top '}],//custom field not done yet, put a few fixed columns first: [{dataindex: ' tf_ Name ', text: ' Project name ', width:250}, {dataindex: ' Tf_budget ', text: ' Total investment '}],store:new Ext.data.Store ({fields: [' Tf_nam E ', {name: ' Tf_budget ', type: ' Float '}],data: [{tf_name: ' Housing construction ', tf_budget:1230000}, {tf_name: ' Road construction project ', Tf_budget : 453092}]})

Gridtoolbar.js

/** * A module of the grid above the display of the toolbar, which placed a variety of operation buttons have not yet taken into account the rights */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: ' New ', Xtype: ' SplitButton ', Glyph:0xf016,menu: [{text: ' Copy new ', Toolt IP: ' Add the current record to the new record first ', glyph:0xf0c5}, '-', {text: ' Upload Excel table single new ', ToolTip: ' Add a new record after adding the data according to the specified Excel table ', glyph:0xf062} , {text: ' Upload Excel table Batch new ', ToolTip: ' Add data according to the requirements in the downloaded Excel table, upload batch new data ', glyph:0xf062}]}, {text: ' Modify ', glyph:0xf044}, {text : ' Delete ', glyph:0xf014}, '-', {glyph:0xf0c6,xtype: ' SplitButton ', menu: [{text: ' Add attachment ', Icon: ' Images/button/additionad D.png ', glyph:0xf093}, '-', {text: ' Preview all Attachments ', glyph:0xf03e}, '-', {text: ' Download all attachments ', glyph:0xf019}]}, {xtype: ' Splitbut Ton ', Glyph:0xf0ce,menu: [{text: ' list exported to Excel ', GLYPH:0XF0CE}, '-', {text: ' Check record exported 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:ex T.create (' Ext.data.Store ', {proxy: {type: ' Rest '}})}];this.callparent ();})

Navigate.js

/** * Navigation area of the main control interface, which is one of the core controls of this system */ext.define (' App.view.module.region.Navigate ', {extend: ' Ext.panel.Panel ', alias: ' Widget.navigate ',//glyph:0xf0d0,title: ' Navigation ', initcomponent:function () {this.callparent ();}})

Detail.js

/** * A record in the grid is selected, showing the area of detail, placed on the right */ext.define (' App.view.module.region.Detail ', {extend: ' Ext.grid.property.Grid ', Alias: ' Widget.recorddetail ',//GLYPH:0XF0CA,//Added this, that the button on the top right can hide this panel is missing, ExtJS is really bug a bag, bug a room title: ' Record Details ', Initcomponent:function () {this.source = {' Project name ': ' title ', ' Total investment ': 2929292}this.callparent ();}})