Ext JS 6开发实例（四） ：调整主视图

上文把主界面设置好，可是主视图由于界面的微调出现了显示问题，本文将把它调整好了。

打开app/view/main/Main.js，能够看到主视图是派生于标签面板（Ext.tab.Panel）的。在视图的标签栏内，除了显示标签外，还显示了标题栏。因为已经从新设计了标题栏，主视图的标签栏就不须要了，于是先把这个去掉。

检查一下代码，会发现代码中有个header配置项，根据API能够知道，该配置项是用来定义面板的标题的，于是把这段代码先去掉。在浏览器中刷新一下，会看到以下图的效果：

从图中能够看到，标题是去掉了，但仍是有问题，再检查下代码，会发现如下三个配置项是与标题和标签的设置有关的：

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,123123

根据API，能够知道tabBarHeaderPosition是用来指定标题栏的位置的，于是能够去掉；titleRotation是用来控制标题文本的显示方向的，这个也能够去掉；tabRotation是用来控制标签文本的显示方向的，暂时保留。

刷新一下浏览器，可看到下图的效果：

从图中能够看到，标题栏已经去掉了，可是标签仍是在顶部。查一下API，能够找到tabPosition配置项，经过它能够控制标签的位置，于是在代码中添加如下代码，让标签显示在左边：

tabPosition: 'left',11

刷新一下浏览器，可看到以下图所示的效果：

从图中能够看到，目标已经实现了。

虽然基本目标已经达成，可是否还存在些小疑惑？为何这个标签面板的标签显示与主题所默认所显示的标签（下图）会不一样？

这是由于，在主视图中使用了自定义的UI，代码以下：

ui: 'navigation',11

根据API，ui配置项的做用是用来指定组件的UI样式，默认值是default，也就是使用默认的样式。而在这里，将值指定为了navigation，也就是说，当前的标签页将使用navigation样式，那么这个样式是在哪里定义的呢？

你们打开sass\src\view\main\Main.scss文件，就会看到navigation的样式定义了。打开文件后，会看到以下的一些代码：

@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

当看到以上的东西，必定会问，这是什么鬼？彻底看不懂啊！先别慌，先打开Ext JS 6的API，找到Ext.tab.Panel的说明，而后在工具栏中找到CSS Mixins菜单，选择extjs-tab-panel-ui，就会看到下图说明了：

从图中的说明能够了解到，“$ui”定义的是UI的名字，“$ui-tab-background-color”就是标签的背景颜色……

根据模板给的示范，是否会以为：其实修改Ext JS 6的样式也不算太难呢？
个人意见是不太难，难的在于入门，呵呵。

在主视图的定义中，还有2个比较特别的配置项：responsiveConfig和defaults和。他们又有什么做用呢？

在API中直接搜索responsiveConfig并切换到Ext.mixin.Responsive类，就能够知道，该配置项的做用是在指定条件下将应用怎样的显示，主视图中的定义说明，在竖向显示的时候，标题栏将显示在顶部，而在横向显示的时候，则显示在左边。

配置项defaults的做用是用来指定子组件的默认配置的，也就是说，在标签面板建立子组件的时候，会把defaults中的配置项应用到子组件 中。根据defaults中的配置项，能够了解到，标签页的内容区域将会向内收缩20个像素（bodyPadding），而每一个标签页的标签 （tabConfig）将应用插件Ext.plugin.Responsive，这样，就能够实如今显示是横向的时候，标签将显示在左边，显示是竖向的时 候，标签显示在顶部，并且宽度固定为120像素。

因为当前项目只基于PC端，于是这两个配置项对当前项目来讲意义不大，能够删除。

接下来修改一下标签页，在当前项目须要用到三个标签页：用户管理、文章管理和图片管理。具体修改代码以下：

    items: [
        {
            title: '用户管理',
            iconCls: 'fa-user'
        },
        {
            title: '文章管理',
            iconCls: 'fa-file-text-o',
        },
        {
            title: '图片管理',
            iconCls: 'fa-photo',
        }
    ]12345678910111213141234567891011121314

这时候若是刷新浏览器，可能会出现乱码的状况，这是由于页面的代码页不是Unicode的，由于须要修改一下文件的代码页。在Visual Studio中，可在文件菜单中选择“高级保存选项”，而后以下图那样，将编码设置为Unicode，再保存就好了。

如今刷新浏览器，可看到以下图的效果：

今天就说到这了，有什么问题或疑问，请加入qq交流群391747779 进行咨询。