面板组件-盒布局

盒布局

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'
}
]