面板组件-盒布局

来源：互联网发布：想学电脑编程编辑：程序博客网时间：2024/05/16 10:03

盒布局

Ext.layout.AbstractBoxLayout类实现盒布局

不能使用AbstractBoxLayout实现盒布局，必须使用继承了BoxLayout类的两个子类：HBoxLayout类与VBoxLayout类来实现水平盒布局与垂直盒布局

1、水平盒布局使用

launch: function(){    var panel = Ext.create('Ext.Panel', {        id: 'myPanel',        layout: {            type: 'hbox',            align: 'stretch',        },        items: [            {                flex: 1,                html: '<h1>子组件1</h1>',                style: 'background-color: #5E99CC'            },            {                flex: 2,                html: '<h1>子组件2<h1>',                style: 'background-color: #759E60'            }        ]    });    Ext.Viewport.add(panel);}

type: 指定容器组件的布局方式。
align: 指定容器中子组件的垂直对齐方式，默认值center。
pack: 指定当使用水平盒布局时容器中子组件的横向对齐方式，默认值start。

水平布局align配置选项及pack配置选项的可设定值及其对齐方式

配置选项选项值对齐方式 align center 中央对齐 align start 顶部对齐 align end 底部对齐 align stretch 子组件的高度自动扩展为容器高度 pack center 中央对齐 pack start 向左对齐 pack end 向右对齐 pack justify 两端对齐

可同时使用width配置选项与flex配置选项来指定组件宽度

itme: [    {        flex: 1,        html: '子组件1',        style: 'background-color: #5E99CC;'    },    {        width: 200,        html: '子组件2',        style: 'background-color: green'    }]

0 0