EXT JS 6 Development Example (iii): main interface design

In the above, the CMD-created application has been imported into the project, and the default main interface has been seen, and today's main task is to modify the main interface to meet the needs of the project. In addition to designing the main interface, there are some other things that need to be configured.

Add a Localization Pack

Open a. app.json file, locate requires, the code is as follows:

"Requires": ["Font-awesome"],12341234

The above code indicates that the project has already referenced the icon of the font awesome by default and can be used directly in the project. This is often used in subsequent development of the project.

Localization files from Ext JS 5, has been introduced in the form of a package, that is, when executing the Sencha app build, the referenced localization package will be packaged into the final app.js file, no longer need to use the script tag in the page to load separately.

To add a localization package, you need to add a "locale" item to the array of requires, and then add a locale configuration that declares which localization packages need to be referenced, only the Chinese, so you just need to put "ZH_CN" as the value of the locale configuration.

The final code for adding a localization package is as follows:

"Requires": ["Font-awesome", "locale"], "locale": "ZH_CN", 123456123456

OK, now execute the Sencha app build to regenerate the application and open the application in the browser if you see the loaded ext-locale-zh_ in the Firebug network panel The Cn.js file, which indicates that the localized file has been loaded correctly, can be used.

Main interface Design

As you can see from the last picture above, the default creation of the main interface is a left-right structure interface. Research under the App\view\main directory of Main.js can clearly know that the entire interface is actually implemented with the label panel (Ext.tab.Panel), but the label is placed on the left. This can be said to be a more popular interface structure at present. However, I would like to have a top bar to show things like project name and Exit button.

To add a top bar, I would prefer to use the vertical box (VBox) layout to divide a container into two parts, of course, if you are accustomed to using the border layout (Border), you can use, the problem is not big, to achieve their own needs on the line.

To achieve this, I'm going to add a viewport view that uses a vertical box layout in the viewport view to divide it into two parts, and in the upper part, you need to add a top view to control the display of the top view, while the lower half continues to use the current master.

Defining the main view

In the App/view directory, add a file named Viewport.js, and then add the basic definition code:

Ext.define (' SimpleCMS.view.Viewport ', {extend: ' Ext.container.Container ', requires: [' Ext.layout.container. VBox ', ' Ext.plugin.Viewport ',], layout: {type: ' VBox ', align: ' Stretch '},}); 1234567891011 121312345678910111213

Because the ext JS 6,viewport class uses the form of plug-ins to implement, so this is also the way to follow. The Ext.layout.container.VBox class is referenced here to implement a vertical box layout.

In the layout configuration item, the vertical box layout is defined here, and the Align configuration item is to tell the parent component that the width of the child component fills the parent component's width.

The next step is to add the subcomponents, with the following code:

Items: [{xtype: ' App-header ', height:65, id: ' App-header '}, { Xtype: ' App-main ', flex:1}]1234567891012345678910

Although the top view is not yet defined, you can still use App-header as the Xtype value for the top view. Here, the height of the top view is positioned to be 65 pixels. The purpose of defining an ID for the top view is to facilitate writing the style of the top view.

In the lower part, the original main view is displayed. The Flex configuration item is used here to tell the parent component that the height of the child view will fill the remaining height of the parent component minus the top view.

Define Top View

In the App/view directory, create a directory named header, and then add a file named Main.js under the directory.

To define the view below, the view is the same as the Ext JS 4 version, the toolbar will be used, the title of the item is displayed on the left, the Change Password and exit button are displayed on the right, the code is as follows:

ext.define ("SimpleCMS.view.header.Main",{    extend:  " Ext.toolbar.Toolbar ",    cls:  ' Toolbar-btn-shadow ',     xtype:   ' App-header ',     items: [        {  xtype:  ' Tbtext ', text:  ' simple CMS system ', id:  ' App-header-title '  },          ',         { tooltip:   ' Change password ', iconcls:  ' x-fa fa-key header-button-color ', cls:  ' Simplecms-header-button ', handler:  ' Onchangepassword '  },         { tooltip:  ' exit ', cls:  ' Simplecms-header-button ', iconcls:  ' X-fa  fa-sign-out header-button-color ', handler:  ' onExit '  }    ]}); 12345678910111213141234567891011121314 

In the toolbar, use the Ext.toolbar.TextItem component on the left to display the project title. An ID is defined for the title to facilitate the definition of the style.

In the definition, "-a" means that the space will be populated with Ext.toolbar.Fill so that the child component is displayed on the right.

In the two defined buttons, the font awesome is used as the icon. FONT Awesome has many icons, how do I choose and use them? In fact, it is very simple, open http://fontawesome.io/icons/in the browser, you can see in the font awesome which icons, the election of an icon, such as car, will see the following sample code on the page:

<i class= "fa fa-car" aria-hidden= "true" ></i>11

In the code "FA Fa-car" is the desired style name, used in ext JS 6, only need to add "X" before the first FA, such as "X-fa Fa-key" in the class definition code.

With the font awesome icon, the icons are black as they are seen on the page by default, so you can change the font color by style, in the code above, the style "Header-button-color" is used to define the font color.

Because the Ext JS button has a background color by default, in the home code, a CLS configuration item is used to add a style "Simplecms-header-button" to remove the background color.

Why use CLS configuration items to remove backgrounds instead of directly in ICONCLS? If you have studied the HTML implementation of a button, you will find that it is structured like this:

<a> <span> <span> <span></span> <span></span> </span> </span></a>1234567812345678

In this structure, the a element is the top-level element, the background color of the button, etc., is defined in this layer. The icon and text of the button are implemented using the deepest two span elements, where the first span element is used to display the icon, and the second span element is used to display the text. The role of the ICONCLS configuration item is to define the button icon, so that the style defined for it is applied only to the deepest first span element, so that adding a style here does not remove the background color of the button. CLS configuration items, in contrast, are used to define the overall style of the button, and the style is applied to the a element.

You may notice that there is no controller and view model defined for the top view, mainly because the class is simpler and does not involve data binding, so it is sufficient to define only one view file.

Add a style to the top view

The top view defines a number of styles, which are defined below. The definition method is the same as Ext JS 4. There is a SASS directory under the application directory, which is used to define the style. In this directory there are etc, example, SRC and var 4 directories, where the SRC directory is directly used to define the style, and the Var directory is used to define the style variables, the API is seen in the CSS VARs variables, of course, can also define their own variables, It does not need to be used here, so it does not unfold.

In the SRC directory to define the style of a view, first of all, to do is to maintain the same directory structure as the view, such as the top view of the directory structure is view/header, then under SRC, you should also define the style of the top view under the View/header directory. Second, the name of the civilization, in addition to the extension, must also be the same, as now the top view of the file name is Main.js, the top view corresponding to the style file is Main.sass.

After creating the Main.sass file in the Src/view/header directory, add the following style code:

#app-header{Background-color: #6A9A1F; border-bottom:1px solid #0d1218!important,}.toolbar-btn-shadow {box-shadow:0 1px 2px rgba (13, 18, 24, 0.2);}    #app-header-title {color: #fff;    font-size:18px; padding:10px 0 10px;}.    simplecms-header-button{Border:none; Background:none;}. header-button-color{Color:orange;} 1234567891011121314151617181920212212345678910111213141516171819202122

Modify the App.js file

Since the default is to use SimpleCMS.view.main.Main as the main view in the App.js file, the master is now modified to SimpleCMS.view.Viewport and needs to be modified.

Results

Now execute the Sencha app build once and then refresh the browser to see the effect.

650) this.width=650; "src=" http://img.blog.csdn.net/20160526170734709 "alt=" here write a picture describing "title=" "/>

As you can see, the overall effect has come out, and the next step is to adjust the display of the lower half of the view.

EXT JS 6 Development Example (iii): main interface design