Learn extjs5 with me (05 -- add the top and bottom areas to the main interface)

Learn extjs5 with me (05 -- add the top and bottom areas to the main interface)

This section adds a top area and a bottom area to the main interface. The interface of a management system can be roughly divided into the top title part, the middle data display and processing part, the bottom remarks and status part. Before adding these two regions, we first add some data to MainModel. js.

Ext. define ('app. view. main. mainModel ', {extend: 'ext. app. viewModel ', alias: 'viewmodel. main ', data: {name: 'app', // system: {name: 'Project contract and fund management system', version: '5. 2014.06.60 ', iconUrl: ''}, // user organization information and user information user: {company: 'wudang Taiji company', department: 'engineering department ', name: 'zhang sanfeng'}, // service organization and service personnel information service: {company: 'wuxi xiwang company ', name: 'jiang feng', phonenumber: '2017 ----', qq: '123', email: 'jfok1972 @ qq.com ', copyright: 'xiwang company' }}// TODO-add data, formulas and/or methods to support your view });

In the code above, three types of data are added to data, and some attributes are listed below. These values and attributes can be obtained from the background later. For example, if the system name in the background is changed, the foreground will refresh the interface to display the new system. name. This is also in line with the development purpose of my system. We can make dynamic information as much as possible. During modification, we only need to configure it at the front-end and do not modify the js or java code at the backend.
The following two files are added to the main directory: Top. js and Bottom. js. The directory structure is as follows:

Top. js defines a class named 'app. view. main. region. top'. Note that the class name is the same as its path. The class loading mechanism of extjs is to locate the specific class file based on the class name.

/*** The top area of the system home page, mainly containing 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 of this component as maintopitems: [{xtype: 'image', bind: {// bind data to the ystem of data in MainModel. iconUrlhidden :'{! System. iconUrl} ', // if the system. if the iconUrl is not set, the image does not display src: '{system. iconUrl} '// according to system. iconUrl settings to load images }}, {xtype: 'label', bind: {text: '{system. name} '// bind the text value to system. name}, style: 'font-size: 20px; color: blue; '}, {xtype: 'label', bind: {text:' {system. version} '}},'-> ', {text: 'menu', menu: [{text: 'Project management', menu: [{text: 'Project project'}, {text: 'Project CIDR Block '}]}, '','', {text: 'homepage'}, {text: 'help'}, {text: 'about '}, {text: 'deregistered'}, '->', '->', {text: 'settings'}]});

The above is the definition of the Top. js class. This is a toolbar control. Some labels and buttons are added to it to display the system name and perform some operations. The default xtype in items of toolbar is Button. The source code comments also contain notes on how to bind data to MainModel. The following is the code for Button. js:

/*** The bottom area of the system homepage, which mainly contains information about the user unit, service unit, and service personnel */Ext. define ('app. view. main. region. bottom ', {extend: 'ext. toolbar. toolbar ', alias: 'widget. mainbottom ', items: [{bind: {text:' usage unit: {user. name} '}}, {bind: {text:' user: {user. name} '}},'-> ', {bind: {text:' service unit: {service. company} '}}, {bind: {text:' service personnel: {service. name} '}}, {bind: {text: 'tel: {service. phonenumber} '}}, {bind: {hidden :'{! Service. email} ', // Add a value before the binding value! Indicates reverse retrieval. If there is an email, it is not hidden. If the email is not set, the text: 'email: {service. eMail} '},{ bind: {text:' is hidden :'©{Service. copyright} '}]});

Now the two js files to be added are ready. Now we need to put them on the Main homepage. You also need to modify Main. js, introduce the above two classes, put them under items, and set the location.

/*** 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 that 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', // name of the controller in the MVVM architecture, the file name will be determined based on 'main' + Controller in the current path. // no other information can be found to automatically load MainController. based on js, only the viewModel: {type: 'main' // viewModel type of the MVVM architecture can be judged above, the file name will be determined based on 'main' + Model in the current path}, layout: {type: 'border' // layout on the home page of the system}, items: [{xtype: 'maintop', region: 'north' // put him at the top}, {xtype: 'mainbottom ', region: 'south' // put him at the bottom }, {xtype: 'panel ', bind: {title:' {name} '}, region: 'west', // html on the left panel: '<ul> <li> This area is commonly used for navigation, for example, using a "tree" component. </li> </ul> ', width: 250, split: true, tbar: [{text: 'button', handler: 'onclickclickclickclick'}]}, {region: 'center', // intermediate xtype: 'tabpanel ', items: [{title: 'tab 1', html:' 
 

 

 

 

 
Extjs has many la s, one of which is commonly used. It can divide items into five parts: top, bottom, left, right, and middle. After completing the steps above, refresh the webpage in the browser and you will see the following results: