Ext.js-容器

简介

Ext.js-容器是一个基于Ext.js框架的组件，用于容纳和管理其他组件。它提供了可配置的布局管理，可以很方便地实现复杂的布局效果。同时，容器可以包含任意数量的子组件，这使得Ext.js-容器成为了一个强大的工具。通过容器，程序员可以实现更加复杂的前端界面。

使用方法

创建容器

要创建一个容器，可以使用Ext.create方法：

var container = Ext.create('Ext.container.Container', {
    renderTo: document.body, //渲染到body标签
    layout: 'hbox', //水平布局
    items: [ //子组件
        {
            xtype: 'panel',
            html: 'Panel 1'
        },
        {
            xtype: 'panel',
            html: 'Panel 2'
        }
    ]
});

在这个例子中，我们创建了一个容器，并将它渲染到了body标签中。该容器使用了水平布局，并包含了两个子组件，它们都是panel类型的组件，并且分别包含了一些文本。

布局管理

Ext.js-容器提供了多种可配置的布局管理方式：

hbox

水平布局。子组件在同一行中排布。

layout: 'hbox'

vbox

垂直布局。子组件按照从上到下的顺序排布。

layout: 'vbox'

border

边框布局。子组件可以沿着容器的上、下、左、右、中心五个方向排布。其中，中心子组件将会自动占据剩余的全部空间。

layout: 'border'

card

卡片布局。只有一个子组件会被显示，其他子组件都会被隐藏。

layout: 'card'

fit

适应布局。子组件会被自动拉伸，以适应容器的大小。

layout: 'fit'

auto

自动布局。子组件会被自动排布。

layout: 'auto'

子组件

容器可以包含任意数量的子组件。每个子组件都可以指定一个xtype属性，用于指定该组件的类型。同时，子组件还可以配置一些自己独有的属性。

以下是一个例子：

var container = Ext.create('Ext.container.Container', {
    renderTo: document.body,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            title: 'Panel 1',
            html: 'This is panel 1.'
        },
        {
            xtype: 'button',
            text: 'Button 1'
        }
    ]
});

在这个例子中，我们创建了一个水平布局的容器，并在其中添加了两个子组件：一个panel类型的组件和一个button类型的组件。其中，panel组件指定了一个标题和一段文本，button组件指定了显示的文本。

结论

Ext.js-容器是一个非常强大的前端组件。通过容器的布局管理，程序员可以轻松地实现复杂的前端布局效果。同时，容器可以包含任意数量的子组件，这使得前端页面的设计变得更加灵活。如果你想要打造一个高效、灵活的前端用户界面，那么Ext.js-容器绝对是一个值得尝试的组件。