4. EXTJS5 (iv) adding top and bottom areas to the main interface

This section adds a top and bottom area to the main interface. The interface of a management system can be divided into the top title section, the middle data display and the processing part, the bottom comment and the status section.

Before we add these two regions, we will first add some data to the mainmodel.js.

Ext.define (' App.view.main.MainModel ', {extend:' Ext.app.ViewModel ', alias:' Viewmodel.main ', data: {name:' App ',        //System Informationsystem: {name:' Project contract and fund management system ', Version:' 5.2014.06.60 ', IconUrl:‘‘        },        //User unit Information and user informationUser: {company:' Wudang Taiji Company ', Department:' Engineering Department ', Name:' Zhang San Fung '        },        //Service Unit and service personnel informationService: {company:' Wuxi Hee Wang Company ', Name:' Shong ', PhoneNumber:' 1320528----', QQ:' 78580822 ', Email:' [Email protected] ', Copyright:' Hee Wang Company '        }    }    //todo-add data, formulas and/or methods to support your view});

In the above code, there are three types of data added to it, with some attributes below. These values and properties can be obtained later from the background. For example, the background system name changed, the front desk refresh the interface, you can show the new system.name. This is also in line with the development of my system, can be dynamic information as dynamic as possible, when modified as long as in the foreground configuration can be, do not modify the background of JS or Java code.

Below is a directory of two files in Main, Top.js and Bottom.js respectively. The directory structure is as follows:

Top.js defines a class whose class name is ' App.view.main.region.Top ', noting that the front of its class name and its path are consistent. The class loading mechanism of ExtJS is to find out where the specific class file is based on the class name.

/** * The top area of the system home page, mainly placing the system name, menu, and some shortcut buttons */

Ext.define (' App.view.main.region.Top ', {extend:' Ext.toolbar.Toolbar ', alias:' Widget.maintop ',//defines the xtype type of this component as Maintopitems: [{xtype:' Image ', bind: {//data binding to Ystem.iconurl in MainmodelHidden: ' {!system.iconurl} ',//If System.iconurl is not set, this image does not displaysrc: ' {system.iconurl} '//load a picture according to System.iconurl settings}}, {xtype:' Label ', bind: {text:' {system.name} '//the text value is bound to System.Name}, Style:' font-size:20px; Color:blue; '}, {xtype:' Label ', bind: {text:' {system.version} '        }    }, ' and ', {text:Menu, Menu: [{text:' Engineering Management ', Menu: [{text:Project}, {text:' Engineering Standard segment '            }]        }]    }, ‘ ‘, ‘ ‘, {text:Home}, {text:Help}, {text:On}, {text:Log off    }, ', ', ' and ', {text:Settings    }]});

Above is the definition of the Top.js class, which is a toolbar control with some label and Button added to display the system name and to implement some operations. The default xtype for toolbar items is button. The comments in the source code also write a note about how to bind to the Mainmodel data.

Here is the code for Button.js:

/** * The bottom area of the System home page, mainly places the user unit information, service units and service personnel information*/Ext.define (' App.view.main.region.Bottom ', {extend:' Ext.toolbar.Toolbar ', alias:' Widget.mainbottom ', items: [{bind: {text:' units used: {User.Name} '}}, {bind: {text:' User: {user.name} '        }    }, ' and ', {bind: {text:' Service unit: {Service.company} '}}, {bind: {text:' Service person: {Service.name} '}}, {bind: {text:' Tel:{service.phonenumber} '}}, {bind: {hidden:' {!service.email} ',//The binding value precedes the Plus! Indicates reverse, if there is an email is not hidden, if the email is not set, then hideText: ' Email:{service.email} '}}, {bind: {text:' ©{service.copyright} '        }    }]});

Now that the two JS files are ready to be added, we're going to put them on the main page. Main.js also needs to be modified to introduce the above two classes and put them under items and set the position.

/** * This class is the main view for the application. It is specified in App.js as * the ' autocreateviewport ' property. That setting automatically applies the ' viewport ' plugin to promote ' instance of this ' class to the BODY element. * * Todo-replace This content of this view to suite the needs of your * application. */Ext.define (' App.view.main.Main ', {extend:' Ext.container.Container ', Xtype:' App-main ', uses: [' App.view.main.region.Top ', ' App.view.main.region.Bottom '], controller:' Main ',    //The name of the controller for the MVVM schema, which determines the file name in the current path based on ' Main ' + Controller    //I didn't find any other basis to automatically load the maincontroller.js, only to make the above judgment.ViewModel: {type:' Main '//The viewmodel type of the MVVM schema, which determines the file name in the current path according to ' Main ' + Model}, Layout: {type:' Border '//layout of the main page of the system}, items: [{xtype:' Maintop ', Region:' North '//Put him on the top.}, {xtype:' Mainbottom ', Region:' South '//Put him down at the bottom .}, {xtype:' Panel ', bind: {title:' {name} '}, Region:' West ',//left panelHTML: ' <ul><li>this area was commonly used for navigation, for example, using a "tree" component.</li>&lt ;/ul> ', Width:250, Split:true, Tbar: [{text:' Button ', Handler:' OnClickButton '}]}, {region:' Center ',//mid-surface versionXtype: ' TabPanel ', items: [{title:' Tab 1 ', HTML:'         }]    }]});

There are many layouts in ExtJS, one of which border is more commonly used, and he can divide items into top, bottom, left, right, and middle five parts. After a few steps above, in the browser refresh the page, you will see the following results:

4. EXTJS5 (iv) adding top and bottom areas to the main interface