在网页开发领域，布局是构建一个美观、高效和用户友好的界面不可或缺的一部分。ExtJS作为一款强大的JavaScript库，提供了丰富的布局选项来帮助开发者实现各种布局需求。本文将揭秘ExtJS中五种实用的布局类型，助你轻松打造高效的网页应用。

1. 管道布局（Border Layout）

管道布局是ExtJS中最常用的布局之一，它将容器分为五个部分：北（north）、南（south）、东（east）、西（west）和中心（center）。每个部分都可以包含一个或多个子组件，而且可以设置大小、隐藏和折叠。

示例代码：

Ext.create('Ext.panel.Panel', {
    title: 'Border Layout',
    width: 400,
    height: 300,
    layout: 'border',
    items: [{
        region: 'north',
        title: 'North Panel',
        height: 100
    }, {
        region: 'west',
        title: 'West Panel',
        width: 150
    }, {
        region: 'center',
        title: 'Center Panel'
    }, {
        region: 'east',
        title: 'East Panel',
        width: 150
    }, {
        region: 'south',
        title: 'South Panel',
        height: 100
    }]
});

2. 网格布局（Table Layout）

网格布局允许开发者将容器内的组件组织成行列结构。每个单元格可以放置一个组件，通过设置列数和行数，可以轻松创建表格式的布局。

示例代码：

Ext.create('Ext.grid.Panel', {
    title: 'Table Layout',
    width: 400,
    height: 300,
    store: Ext.create('Ext.data.ArrayStore', {
        fields: [
            {name: 'name'},
            {name: 'email'}
        ],
        data: [
            ['Alice', 'alice@example.com'],
            ['Bob', 'bob@example.com'],
            ['Charlie', 'charlie@example.com']
        ]
    }),
    columns: [
        {text: 'Name', dataIndex: 'name'},
        {text: 'Email', dataIndex: 'email'}
    ],
    layout: 'table',
    columns: 2,
    rows: 3
});

3. 卡片布局（Card Layout）

卡片布局允许开发者将多个组件以卡片形式堆叠，用户可以通过点击卡片来切换显示不同的组件。这种布局适合展示多个相关但不连续的信息。

示例代码：

Ext.create('Ext.container.Viewport', {
    layout: 'card',
    items: [{
        title: 'Card 1',
        html: 'This is the first card.'
    }, {
        title: 'Card 2',
        html: 'This is the second card.'
    }, {
        title: 'Card 3',
        html: 'This is the third card.'
    }]
});

4. 简单布局（Simple Layout）

简单布局是最基础的布局，它将容器内的组件按顺序水平或垂直排列。这种布局适用于简单界面，如侧边栏或底部工具栏。

示例代码：

Ext.create('Ext.container.Panel', {
    title: 'Simple Layout',
    width: 400,
    height: 300,
    layout: 'hbox',
    defaults: {
        flex: 1
    },
    items: [{
        html: 'Panel 1'
    }, {
        html: 'Panel 2'
    }, {
        html: 'Panel 3'
    }]
});

5. 表单布局（Form Layout）

表单布局专门用于构建表单界面，它可以将表单元素垂直或水平排列。这种布局可以自动调整表单元素的大小，确保布局整齐有序。

示例代码：

Ext.create('Ext.form.Panel', {
    title: 'Form Layout',
    width: 400,
    height: 300,
    bodyPadding: 10,
    layout: 'form',
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    }, {
        fieldLabel: 'Email',
        name: 'email'
    }]
});

通过掌握这五种ExtJS布局类型，开发者可以轻松打造出各种复杂和高效的网页应用。在实际开发中，可以根据需求灵活运用这些布局，以实现最佳的用户体验。