ExtJS 布局-Fit布局（Fit Layout）

更新记录：
2022年5月31日 第一稿。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

1.说明#

Fit布局只会显示一个子组件，子项组件的尺寸会拉伸到容器的尺寸。当容器进行调整大小（resized），子组件会自动调整去拉伸到付容器的大小。
注意：
fit布局只适用于父容器的第一个子组件，如果定义了多个组件，则第一个组件将显示，因为它将扩展到其父项的剩余空间，其他组件将不可见。

2.设置布局方法#

layout: 'fit',

或者

layout: {
   type: 'fit'
}

3.适合和不适合场景#

适合场景：

1.子组件需要铺满父元素。

不适合场景：

2.存在多个子组件的情况。

4.实例#

4.1实例：panel组件设置fit布局#

代码：

{
    xtype: 'panel',
    title: 'Panda Container Title',
    width: 300,
    height: 350,
    layout: {
        type: 'fit'
    },
    items: [
        {
            xtype: 'panel',
            html: 'Panda666 CN',  //已改，防盗
            bodyStyle: 'background:red'
        }
    ]
}

4.2实例：container容器设置fit布局#

代码：

{
    xtype: 'container',
    layout : {
        type :'fit'
    },
    width : 600,
    height: 400,
    defaults: {
        bodyPadding: 15,
    },
    items : [
        {
            title: 'Com Panda666',
            html : 'Panda666  com', //防盗，哈哈
        }
    ]
}