Ext3.2 布局——vbox layout

一种在容器中垂直布置项目的布局。 此布局在包含一个数字

flex

配置项的 子项目之间分割可用垂直空间。通过配置
align 选项，此布局也可以用来设置子项目的宽度。

 Ext.onReady(function() {
var currentName;
var replace = function(config, name) {
var btns = Ext.getCmp('btns');

if (name && name != currentName) {
currentName = name;

btns.remove(0);

btns.add(config);
};

// console.profile();

btns.doLayout();
// console.profileEnd();
}

var viewport = new Ext.Viewport({
layout:'border',

items: [{
id:'btns',
region:'west',
baseCls:'x-plain',
split:true,
width:150,
minWidth: 100,
maxWidth: 250,
layout:'fit',
margins: '5 0 5 5',
items: {
baseCls: 'x-plain',
html: '<p style="padding:10px;color:#556677;font-size:11px;">Select a configuration to the right »</p>'
}
}, {
region:'center',
margins: '5 5 5 0',
layout: 'anchor',
items:[{
anchor: '100%',
baseCls:'x-plain',
layout: {
type:'hbox',
padding: 10
},
defaults:{
margins:'0 5 0 0',
pressed: false,
toggleGroup:'btns',
allowDepress: false
},
items: [{
xtype:'button',
text: 'Spaced / Align: left',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'left'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'spacer',
flex:1
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'spaced');
}
},{
xtype:'button',
text: 'Multi-Spaced / Align: left',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'left'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'spacer',
flex:1
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'spacer',
flex:1
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'spacer',
flex:1
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'multi spaced - align left');
}
},{
xtype:'button',
text: 'Align: left',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'left'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align left');
}
},{
xtype:'button',
text: 'Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align center');
}
},{
xtype:'button',
text: 'Align: stretch',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align stretch');
}
},{
xtype:'button',
text: 'Align: stretchmax',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'stretchmax'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align stretchmax');
}
}]
},{
anchor: '100%',
baseCls:'x-plain',
layout: {
type:'hbox',
padding: '0 10 10'
},
defaults:{
margins:'0 5 0 0',
pressed: false,
toggleGroup:'btns',
allowDepress: false
},
items: [{
xtype:'button',
text: 'Flex: Even / Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:1,
margins:'0'
}]
}, 'alignflexeven');
}
},{
xtype:'button',
text: 'Flex: Ratio / Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:3,
margins:'0'
}]
}, 'alignflexratio');
}
},{
xtype:'button',
text: 'Flex + Stretch',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
align:'stretch'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:3,
margins:'0'
}]
}, 'alignflex+ stretch');
}
},{
xtype:'button',
text: 'Pack: start / Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
pack:'start',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align pack start + align center');
}
},{
xtype:'button',
text: 'Pack: center / Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
pack:'center',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'align pack center + align center');
}
},{
xtype:'button',
text: 'Pack: end / Align: center',
handler: function(){
replace({
layout: {
type:'vbox',
padding:'5',
pack:'end',
align:'center'
},
defaults:{margins:'0 0 5 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'align pack end + align center');
}
}]
}]
}]
});
});

上面的代码是官方的example。一共展示了12中组合。主要涉及到3个配置项。

align : String

控制容器中的子项目如何对齐。 此参数可接受的配置值为:

left : Default
子项目被布置在容器水平方向的左侧

center :
子项目被布置在容器垂直方向的中部

stretch :
子项目在水平方向上被延长，充满容器的宽度

stretchmax :
子项目在水平方向上被延长为最大项目的高度。

flex : Number

此配置选项将被应用到容器中的子项目，此容器 被当前布局管理。 每个拥有flex参数的子项目 都将被垂直伸缩， 根据每个项目的相关的
flex值与所有项目总和的比例， 任何拥有flex= 0或者flex= undefined 的子项目都将不会被'flexed' (初始的尺寸不会被改变)。
flex简单的说，如果布局为vbox的容器内有5个button，其中有一个按钮A没有设置flex，或者flex=0。剩下四个分别是1，1，1，3。那么这个容器内的总高度减去按钮A的高度，然后除以6（1+1+1+3），分别乘以flex的值，所得的结果就是该按钮的高度。

上述例子中有一个填充角色的组件。

{
xtype:'spacer',
flex:1
},

该组件一共有三个，将四个按钮垂直分开。因为他们三个都设置了flex=1。

pack : String

控制如何将容器中的子项目装在一起。 此属性可接受的配置值是:

start : Default
子项目在容器的顶部被装在一起

center :
子项目在容器的中间高度被装在一起

end :
子项目在容器的底部被装在一起

也就是说从纵向如何摆放元素。