ExtJs常用layout布局整理

叁歲伎倆 2021-09-16 02:34 359阅读 0赞

### 前言 ###

ExtJs常见的布局方式有：`border` 、`form`、`absolute`、`column`、`accordion`、`table`、`fit`、`card`、`anchor`  
    另外，不常见的布局有：`tab`、`vbox`、`hbox`  
    这些布局可以快速的帮助我们进行网页搭建  
**简介：**  
    最常用的边框布局——**BorderLayout**  
    最简单的布局——FitLayout  
    制作伸缩菜单的布局——Accordion  
    实现操作向导的布局——CardLayout  
    控制位置和大小的布局——AbsoluteLayout  
    表单专用的布局——**FormLayout**  
    分列布局——**ColumnLayout**  
    表格状布局——**TabelLayout**  
    BoxLayout——HBox  
    BoxLayout——VBox

### 一、border 布局 ###

**简介：**也称`边界布局`、`方位布局`。该布局把容器分为`东、南、西、北、中`五个区域,分别由`east、south、west、north、center`表示。我们需要在items中使用`region`参数来给它定位。

**注意：**`north`和`south`部分只能设置`高度`（height），`west`和`eas`t部分只能设置`宽度`（width）。`center区域必须有`，且它的大小是在其他4个部分设置好以后`自动`计算出来的，所以`不能`为它指定宽度值或高度值。  
    **实例：**

var borderPanel = new Ext.Panel({
        renderTo: 'borderDiv',
        layout: 'border',
        tltle: 'Border Layout',
        width: 1000,
        height: 800,
        defaults: {
            collapsible: true, // 支持该区域的展开和折叠
            split: true, // 支持用户拖放改变该区域的大小
            bodyStyle: 'padding:15px'
        },
        items: [{
            title: 'Footer-s',
            region: 'south',
            height: 100,
            minSize: 75,
            maxSize: 250,
            html: '这是南边区域 south'
    
        }, {
            titlr: 'Main Content-c',
            region: 'center',
            collapsible: false,
            html: '这是中间区域 center'
        }, {
            title: 'Navigation-w',
            region: 'west',
            width: 150,
            minSize: 100,
            maxSize: 250,
            html: '这是西边区域 west'
        }, {
            title: 'North',
            region: 'north',
            height: 100,
            html: '这是北边区域 north'
        }, {
            title: 'East',
            region: 'east',
            width: 150,
            html: '这是东边区域 east'
        }]
    });</span>

**运行结果:**  
![70][]

### 二、form 布局 ###

**简介：**也称`表单布局`。是一种专门用于管理表单中输入字段的布局,这种布局在程序中主要用于创建表单字段或表单元素使用。  
    **注意：**`子组件垂直排放`,它可以是一种布局样式，也可以是一个组件。也就是说既可以`layout : ‘form’`也可以`new Ext.FormPanel` 来使用它。区别就是对于 Panel 我们配置了 layout 为 form ，而对于 FormPanel 它`默认`的布局就是form布局，所以对于习惯于用 Panel 而不习惯用 FormPanel 的朋友尽管用Panel,但是一定要考虑好提交的问题，如果使用 panel 的话，要做提交可是要一个个获得控件的值的，而 FromPanel 则不需要。  
    **实例：**

var formPanel = new Ext.FormPanel({
        renderTo: 'formDiv',
        width: 500,
        height: 300,
        labelWidth: 80,
        defaultType: 'textfield',
        frame: true,
        items: [{
            fieldLabel: '用户名',
            name: 'username'
        }, {
            fieldLabel: '密码',
            name: 'password'
        }, {
            fieldLabel: '日期',
            name: 'date',
            xtype: 'datefield',
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 1]

### 三、absolute 布局 ###

**简介：**也称`绝对定位布局`。该布局使用很简单粗暴，直接给出其x、y值来定位即可。  
    **注意：** x、y值是相对其父容器而言，从`左上角（0,0）`开始计算。  
    **实例：**

var absolutePanel = new Ext.Panel({
        renderTo: 'absoluteDiv',
        layout: 'absolute',
        title: 'Absolute Layout',
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1',
            x: 50,
            y: 50,
            html: 'x:50,y:50'
        }, {
            title: 'panel-2',
            x: 100,
            y: 100,
            html: 'x:100,y:100',
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 2]

### 四、column 布局 ###

**简介：**也称`列布局`。该布局把整个容器组件看成`一列`,然后往里面放入子元素的时候,可以通过子元素制定`columnWidth`和`width`来制定列的宽度,`columnWidth`是按百分比来制定列的宽度,`width`是按照绝对像素来制定列的宽度。在实际应用中可以两种混合使用。  
    **注意：**该布局的子面板的所有`columnWidth`值必须在`0~1`之间或者是百分比。columnWidth值的总和应该为1，即100%。另外，如果任何子面板`没有`指定`columnWidth`值，那么它将`占满`剩余的空间。  
    **实例：**

var columnPanel = new Ext.Panel({
        renderTo: 'columnDiv',
        layout: 'column',
        width: 500,
        height: 300,
        items: [{
            title: 'Width = 25%',
            columWidth: .25,
            html: '111111111111'
        }, {
            title: 'Width = 75%',
            columnWidth: .75,
            html: '111111111111'
        }, {
            title: 'Width = 200px',
            width: 200,
            html: '111111111111'
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 3]

### 五、accordion 布局 ###

**简介：**也称`可折叠布局`、`手风琴布局`。该布局的容器的子元素是`可折叠`的形式表现。  
    **注意：**只有`Ext.Panels`和所有`Ext.panel.Panel`子项，才可以使用`accordion布局`。  
    **实例：**

var accordionPanel = new Ext.Panel({
       renderTo: 'accordionDiv',
       layout: 'accordion',
       title: 'Accordion Layout',
       width: 500,
       height: 300,
       layoutConfig: {animate: false},
       items: [{
           title: 'panel-1', html: 'hello accordion'
       }, {
           title: 'panel-2', html: '<p>段落</p>'
       }, {
           title: 'panel-3',
           html: '<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>'
       }, {
           title: 'panel-4', html: '<button>按钮</button>'
       }]
    });</span>

**运行结果:**  
![这里写图片描述][70 4]

### 六、table 布局 ###

**简介：**也称`表格布局`。按照普通表格的方法布局子元素，用`layoutConfig:{columns:3}` ,将父容器分成3列。它的item可配置的参数有：`rowspa`n 合并的行数；`colspan`合并的列数。  
    \*\*注意：\*\*table布局本身并没有什么特殊功能，它所实现的效果其实完全可以用 border 布局和 column 布局等方式代替，而且这些布局方式更灵活。  
    **实例：**

<pre name="code" class="javascript">var tablePanel = new Ext.Panel({
        renderTo: 'tableDiv',
        width: 500,
        height: 300,
        layout: 'table',
        layoutConfig: {columns: 3},//定义了一共要分3列
        items: [
            {title: 'panel-1', html: '1111111111',rowspan:2},//合并了2行
            {title: 'panel-2', html: '2222222222',colspan:2},//合并了2列
            {title: 'panel-3', html: '3333333333'},
            {title: 'panel-4', html: '4444444444'}
        ]
    });

**运行结果:**  
![这里写图片描述][70 5]

### 七、fit 布局 ###

**简介：**也称`自适应布局`。子元素将自动填满整个父容器。  
    **注意：**在fit布局下，对其子元素设置宽度是`无效`的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。  
    **实例：**

var fitPanel = new Ext.Panel({
        renderTo: 'fitDiv',
        layout: 'fit',
        width: 500,
        height: 300,
        items: [{
            title: 'Fit Panel',
            html: '111111111111'
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 6]

### 八、card 布局 ###

**简介：**也称`卡牌布局`、`卡片式布局`。该布局最TMD麻烦了。这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的`分步提交`。  
    **注意：**由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。可以通过调用 `setActiveItem( )` 函数来实现跳转。由于只有一个面板处于显示状态，那么在初始时，我们可以使用 activeItem： 属性来指定某一个面板的显示。对了，如果Ext-4 之后的版本就不是这样操作了。  
    **实例：**

// card布局所需要的跳转方法-setActiveItem
    var i=0;
    var navHandler = function(direction){ 
    
        if (direction == -1){
            i--;
            if (i < 0) { i = 0;}
        }
        if (direction == 1){
            i++;
            if (i > 2) { i = 2; return false;}
        }
        cardPanel.getLayout().setActiveItem(i);
    };
    
    var cardPanel = new Ext.Panel({
        renderTo: 'cardDiv',
        layout: 'card',
        title:'注册向导',
        width: 500,
        height: 300,
        activeItem: 0,
        bodyStyle:'padding:15px',
        defaults:{
            border:false
        },
        bbar: [ {
            id: 'move-prev',
            text: '«Previous',
            handler:navHandler.createDelegate(this,[-1])
        },'->', {
            id: 'move-next',
            text: 'Next »',
            handler:navHandler.createDelegate(this,[1])
        }],
        items: [{
            id: 'card-0',
            html: '<h1>欢迎来到注册向导！</h1><p>Step 1 of 3</p>'
        }, {
            id: 'card-1',
            html: '<h1>请填写注册资料！</h1><p>Step 2 of 3</p>'
        }, {
            id: 'card-2',
            html: '<h1>注册成功！</h1><p>Step 3 of 3 - Complete</p>'
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 7]

### 九、anchor 布局 ###

**简介：**也称`锚点布局`。感觉无卵用， anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，`即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小`。  
    \*\*注意：\*\*anchor属性为`一组字符串`，可以使用百分比或者是-数字（注意前面是有负号的，即数字为负数）来表示，字符串之间用空格隔开。  
    **实例：**

var anchorPanel = new Ext.Panel({
        renderTo: 'anchorDiv',
        layout: 'anchor',
        title: 'Anchor Layout',
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1',
            height: 100,
            anchor: '-50',
            html: '高度等于100，宽度 = 容器宽度 - 50'
        }, {
            title: 'panel-2',
            height: 100,
            anchor: '50%',
            html: '高度等于100，宽度 = 容器宽度的50%'
        },{
            title:'panel-3',
            anchor: '50% 50%',
            html: '高度、宽度 = 容器的50%'
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 8]

### 十、tab 布局 ###

**简介：**也称`分页布局`、`标签布局`。  
    **实例：**

var tabPanel = new Ext.TabPanel({
        renderTo: 'tabDiv',
        width: 500,
        height: 300,
        activeTab: 0, // 默认显示第一个Tab的内容
        defaults: {
            autoScroll: true
        },
        items: [{
            title: 'Tab-0',
            html: "第一个Tab的内容"
        }, {
            title: 'Tab-1',
            html: '我是另一个Tab',
        }, {
            title: 'Tab-2',
            html: '这是一个可以关闭的Tab',
            closable: true
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 9]

### 十一、vbox 布局 ###

简介：也称`竖直布局`。vertical box ,垂直方向的分行显示。它的 item 有一个`flex`属性，其值越大，对应的组件就会占据越大的空间。  
    **实例：**

var vboxPanel = new Ext.Panel({
        renderTo: 'vboxDiv',
        layout: {
            type: 'vbox',
            align: 'stretch' //拉伸使其充满整个父容器
        },
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1', html: 'flex:1', flex: 1
        }, {
            title: 'panel-2', html: 'height:150', height: 150
        }, {
            title: 'panel-3', html: 'flex:2', flex: 2
        }]
    });</span>

**运行结果:**  
![这里写图片描述][70 10]

### 十二、hbox 布局 ###

简介：也称“水平布局”。horizontal box ，水平方向的分列显示。和 vbox 类似，有flex 属性。  
    **实例：**

var hbox = new Ext.Panel({
        renderTo: 'hboxDiv',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        width: 500,
        height: 300,
        items: [{
            title: 'panel-1', html: 'flex:1', flex: 1
        }, {
            title: 'panel-2', html: 'height:150', width: 150
        }, {
            title: 'panel-3', html: 'flex:2', flex: 2
        }]
    })</span>

**运行结果:**  
![这里写图片描述][70 11]

### 总结： ###

简单总结起来:  
        border布局一般作为页面整体布局来使用；  
        fit布局适用于那种需要将子类完全占满父类容器的情况；  
        column布局用于多列；  
        form是一种表单特有布局方式，实质是一行一控件的形式；  
        table布局适用多行多列但是有时宽高不太容易控制。  
        而且值得强调的一点就是给一个控件设置layout属性，**其实指的是其内部控件的布局方式而不是它本身的布局**，这点要搞清楚。

[70]: /images/20210726/91b0b00274e84376b36d6e304e727fec.png
[70 1]: /images/20210726/5130999c07e04ac4adfd9c7901924af8.png
[70 2]: /images/20210726/408f2480599b47f5a76c163f273297e4.png
[70 3]: /images/20210726/3d9b64a588d74cd393b6a9e712e0d163.png
[70 4]: /images/20210726/491dd7f27d0e4468964dd3e1123c9885.png
[70 5]: /images/20210726/5fb7a349df3f493399c6df1dd97c693a.png
[70 6]: /images/20210726/3878dce0b0dd4c3a91af1b0854986ec3.png
[70 7]: /images/20210726/fee87c559a0d4d7ca15610f1c2ff7f55.png
[70 8]: /images/20210726/015f3e3e4a8749019d16ea8a4d402c69.png
[70 9]: /images/20210726/b6be9d5e060f4248939956ee21d1b5ee.png
[70 10]: /images/20210726/041045272eba48028896eab44cae19ed.png
[70 11]: /images/20210726/62e475ea89654aea977ba04bad3da2e9.png