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

发布时间：2023-05-17 10:36:09

前言

在前几篇文章中，我们已经学习了如何创建Ext JS 6应用程序、如何使用视界（Viewport）和Panel等组件，以及如何添加工具栏和菜单等内容。在这篇文章中，我们将进一步学习如何调整主视图，包括视图的布局和样式等方面。

一、调整布局

在前面的例子中，我们使用了默认的Border布局，在Viewport中添加了两个Panel组件。现在我们要尝试一下其他布局，比如VBox、HBox等。这些布局都是Box布局的子布局，所以首先要引入Box布局类：

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.layout.container.VBox',
        'Ext.layout.container.HBox',
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'box',  //默认为border布局
        pack: 'start',
        align: 'stretch' //子项铺满容器高度
    },
    items: [{
        xtype: 'panel',
        title: 'Panel 1',
        width: '50%',
        height: 200
    },{
        xtype: 'panel',
        title: 'Panel 2',
        width: '50%',
        height: 200
    },{
        xtype: 'panel',
        title: 'Panel 3',
        flex: 1,
        height: 200
    }]
});

在上面的代码中，我们将主视图的布局类型改为了Box（默认是Border）。然后在items中添加三个Panel组件。个和第二个Panel组件的宽度都是50%，高度固定为200。第三个Panel组件的高度也是200，但是宽度没有设置，使用了flex属性。flex是Box布局的一个很重要的属性，它指定子项在容器内的占比，一般用来实现动态布局。

运行代码后，我们可以看到三个Panel组件都排列在一行中，宽度分别为50%和50%。第三个Panel组件的宽度自适应，它占据了剩余的空间。

二、调整样式

在Ext JS中，我们关心的不仅是视图的布局，还有视图的样式。在前面的例子中，我们做了一些简单的样式调整，比如修改了标题栏的背景颜色和字体颜色。接下来，我们将继续调整样式，在全局和组件层面上。

1、全局样式

在Ext JS中，我们可以通过给Viewport添加cls属性来添加类名，然后再通过CSS样式来修改全局样式。代码如下：

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.layout.container.VBox',
        'Ext.layout.container.HBox',
        'MyApp.view.main.MainController',
        'MyApp.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'box',
        pack: 'start',
        align: 'stretch'
    },
    cls: 'myapp-main',  //添加类名
    items: [{
        ...
    }]
});

然后在CSS文件中添加样式：

.myapp-main .x-toolbar-default {
    background-color: rgba(0,0,0,0.8);  //半透明黑色背景
    color: #FFF;
}

这里我们修改了工具栏的背景颜色和字体颜色。

2、组件样式

在前面的例子中，我们已经学习了如何给Panel组件添加一些样式，比如背景颜色、字体大小等。现在我们要对工具栏和菜单做一些样式调整。

首先，我们要知道工具栏的类名：x-toolbar-default。我们可以在页面中打开开发者工具，查看DOM结构和css类名。

然后在CSS文件中添加样式，比如修改工具栏的背景和圆角：

.x-toolbar-default {
    background-color: rgba(0,0,0,0.8);  //工具栏的背景颜色
    border-radius: 0px;  //工具栏的圆角
}

接下来我们要关注菜单的样式。默认情况下，菜单的样式比较简单，我们可以根据需要自行修改。比如，修改菜单的背景和圆角：

.x-menu {
    background-color: rgba(0,0,0,0.8);  //菜单的背景颜色
    border-radius: 0px;  //菜单的圆角
}

三、总结

在Ext JS中，调整主视图的布局和样式是非常容易的。我们可以通过设置布局类型、添加flex属性等方式来实现不同的布局效果。同时，我们可以通过添加类名、修改CSS样式等方式来修改全局样式和组件样式。需要注意的是，在修改样式的时候，一定要仔细查看DOM结构和组件类名，确保修改的样式生效。

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

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