Learn Extjs5 with me (add the top and bottom areas of the 05--main interface)

Learn Extjs5 with me (add the top and bottom areas of the 05--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 Information Systems: {Name: ' Project contract and money Management System ', version: ' 5.2014.06.60 ', IconUrl: '},//user information and user info: {company: ' Wudang Taiji ', Depar Tment: ' Engineering department ', name: ' Zhang Sanfeng '},//Service Unit and service personnel information services: {company: ' Wuxi Hee Wang Co. ', Name: ' Shong ', PhoneNumber: ' 1320528----', QQ: ' 7858 0822 ', 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.

/** * System home page of the top area, mainly placed system name, menu, and some shortcut button */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 bound to Mainmodel : ' {!system.iconurl} ',//If System.iconurl is not set, this image does not display src: ' {system.iconurl} '//Load picture According to the settings of System.iconurl}}, {Xtype : ' label ', bind: {text: ' {system.name} '///text value bound to System.name},style: ' font-size:20px;  Color:blue; '}, {xtype: ' label ', bind: {text: ' {system.version} '}}, ', ', ' {text: ' Menu ', menu: [{text: ' Project Management ', menu: [{text: ' project '}, {text: ' Project Segment '}]}]}, ', ', {text: ' Home '}, {text: ' Help '}, {text: ' Out '}, {text: ' Logout '}, '--', '-& gt; ', {text: ' Set '}]});

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: ' Using unit: {User.Name} '}}, {bind: {text: ' User: {User.Name} '}}, '-', {b IND: {text: ' Service unit: {Service.company} '}}, {bind: {text: ' service person: {service.name} '}}, {bind: {text: ' Tel:{service.phonenumb ER} '}}, {bind: {hidden: ' {!service.email} ',//binding value in front of add! Indicates reverse, if an email is not hidden, if the email is not set, then hide text: ' 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 was 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 of the MVVM schema, will be in the current path according to ' main ' + Controller to determine the file name//This I did not find any other maincontroller.js can automatically load the basis, only to make the above judgment ViewModel: {type: ' main '//MVVM schema ViewModel type, The file name},layout is determined in the current path according to the ' Main ' + Model: {type: ' border '//the layout of the main page of the system},items: [{xtype: ' Maintop ', Region: ' North '//put him  On top}, {xtype: ' Mainbottom ', Region: ' South '//put him at the bottom}, {xtype: ' Panel ', bind: {title: ' {name} '},region: ' West ',// Left panel HTML: ' <ul><li>this area was commonly used for navigation, for example, using a ' treE "component.</li></ul>", Width:250,split:true,tbar: [{text: ' Button ', handler: ' OnClickButton '}]}, {Regi On: ' Center ',//middle panel xtype: ' 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: