EXT JS 6 Development Example (iv): adjusting the main view

The main interface is set up above, but the front view is displayed because of the fine-tuning of the interface, this article will adjust it.

Open App/view/main/main.js and you can see that the main view is derived from the label panel (Ext.tab.Panel). In the tab bar of the view, the title bar is displayed in addition to the label. Since the title bar has been redesigned, the main view of the tab bar is not required, so first remove this.

Check the code, you will find a header configuration item in the code, according to the API can be known that the configuration item is used to define the title of the panel, so the code first removed. Refresh in the browser and you'll see the effect:

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

You can see that the title is removed, but there is still a problem, and then check the code, you will find the following three configuration items are related to the title and label settings:

Tabbarheaderposition:1, titlerotation:0, tabrotation:0,123123

According to the API, you can know that tabbarheaderposition is used to specify the position of the title bar, so it can be removed; Titlerotation is used to control the direction of the caption text display, this can also be removed The tabrotation is used to control the display direction of the label text and is retained temporarily.

Refresh the browser to see the effect:
650) this.width=650; "src=" http://img.blog.csdn.net/20160527143655256 "alt=" here write a picture describing "title=" "/>

As you can see, the title bar has been removed, but the label is still at the top. Check the API, you can find the TabPosition configuration item, it can control the location of the label, so add the following code in the code, so that the label appears on the left:

TabPosition: ' Left ', 11

Refresh your browser to see the effect as shown:
650) this.width=650; "src=" http://img.blog.csdn.net/20160527144018943 "alt=" here write a picture describing "title=" "/>

As you can see, the goal has been fulfilled.

Although the basic goals have been achieved, are there still some doubts? Why does the label display of this tab panel differ from the label () that is displayed by default on the theme?

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

This is because the custom UI is used in the main view and the code is as follows:

UI: ' Navigation ', 11

The role of the Api,ui configuration item is to specify the UI style of the component, which defaults to default, that is, using the defaults. And here, the value is specified in order to navigation, that is, the current tab will use the navigation style, then where is this style defined?

When you open the Sass\src\view\main\main.scss file, you will see the navigation style definition. When you open a file, you see some code like this:

@include  extjs-tab-panel-ui (     $ui:  ' navigation ',     $ ui-tab-background-color: transparent,     $ui-tab-background-color-over:  #505050,      $ui-tab-background-color-active:  #303030,     $ ui-tab-background-gradient:  ' None ',     $ui-tab-background-gradient-over:  ' None ',      $ui-tab-background-gradient-active:  ' None ',     $ui-tab-color:   #acacac,     $ui-tab-color-over:  #c4c4c4,     $ ui-tab-color-active:  #fff,     $ui-tab-glyph-color:  #acacac,      $ui-tab-glyph-color-over:  #c4c4c4,     $ui-tab-glyph-color-active:  #fff,      $ui-tab-glyph-opacity: 1,     $ui-tab-border-radius: 0,      $ui-tab-border-width: 0,     $ui-tab-inner-border-width: 0,     $ui-tab-padding: 24px ,     $ui-tab-margin: 0,     $ui-tab-font-size: 15px,      $ui-tab-font-size-over: 15px,     $ui-tab-font-size-active:  15px,     $ui-tab-line-height: 19px,     $ui-tab-font-weight:  bold,     $ui-tab-font-weight-over: bold,    $ ui-tab-font-weight-active: bold,     $ui-tab-icon-width: 24px,      $ui-tab-icon-height: 24px,     $ui-tab-icon-spacing: 5px,      $ui-bar-background-color:  #404040,     $ui-bar-background-gradient:  ' None ',      $ui-bar-padding: 0,     $ui-strip-height: 0); 12345678910111213141516171819202122232425262728293031323334351234567891011121314151617181920212223242526272829303132333435 

When you see something above, you will ask, what is this ghost? I can not understand it completely! Don't panic, first open the Ext JS 6 API, find Ext.tab.Panel instructions, and then find the CSS mixins menu in the toolbar, select Extjs-tab-panel-ui, you will see the description:
650) this.width=650; "src=" http://img.blog.csdn.net/20160527150542103 "alt=" here write a picture describing "title=" "/>

Note that "$ui" defines the name of the UI, "$ui-tab-background-color" is the background color of the label ...

According to the template to give the demonstration, whether it will feel: in fact, change the style of Ext JS 6 is not too difficult?
My opinion is not too difficult, the difficulty lies in the introduction, hehe.

In the definition of the main view, there are 2 more special configuration items: Responsiveconfig and Defaults and. What role do they have?

In the API directly search responsiveconfig and switch to the Ext.mixin.Responsive class, you can know that the role of the configuration item will be applied under the specified conditions, the definition of the main view of the description, in the vertical display, the title bar will be displayed at the top, while in the horizontal display, the Shown on the left.

The purpose of configuration item defaults is to specify the default configuration of subcomponents, that is, when creating subcomponents in the label panel, the configuration items in the defaults are applied to the child components. Depending on the configuration item in defaults, you can see that the content area of the tab page will shrink inward by 20 pixels (bodypadding). The label for each tab (TABCONFIG) will be applied to the plug-in Ext.plugin.Responsive, so that it can be implemented when the display is landscape, the label will appear on the left side, the display is vertical, the label is displayed at the top, and the width is fixed to 120 pixels.

Because the current project is based only on the PC side, these two configuration items have little meaning for the current project and can be deleted.

Next Change the tab page, in the current project need to use three tabs: User management, article management and image management. The specific modification code is as follows:

    items: [         {            title:  ' User Management ',             iconCls:  ' Fa-user '          },        {             title:  ' article management ',             iconCls:  ' Fa-file-text-o ',        },         {             title:  ' picture Management ',             iconcls:   ' Fa-photo ',         }    ] 12345678910111213141234567891011121314 

In this case, if you refresh the browser, it may be garbled, this is because the page code page is not Unicode, because you need to modify the code page of the file. In Visual Studio, you can choose advanced Save Options from the File menu, and then set the encoding to Unicode, and then save it.
650) this.width=650; "src=" http://img.blog.csdn.net/20160527153732645 "alt=" here write a picture describing "title=" "/>

Now refresh the browser to see the effect as:

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

Today is the point, there are any questions or questions, please join QQ Exchange Group 391747779 for consultation.

EXT JS 6 Development Example (iv): adjusting the main view