Ext3.2 布局——hbox layout

一个在容器中按照水平方向布置项目的布局。 此布局在包含一个数字

flex

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

它与vbox基本是一样的。vbox，纵向；hbox，横向。

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(Ext.apply(config, {
layout:'hbox'
}));
};

btns.doLayout();
}

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

items: [{
id:'btns',
region:'north',
baseCls:'x-plain',
split:true,
height:50,
minHeight: 40,
maxHeight: 85,
layout:'fit',
margins: '5 5 0 5',
items: {
baseCls: 'x-plain',
html: '<p style="padding:10px;color:#556677;">Select a configuration below:</p>'
}
}, {
region:'center',
margins: '0 5 5 5',
layout:'anchor',

items:[{
anchor:'100%',
baseCls:'x-plain',
layout:'hbox',
layoutConfig: {
padding: 10
},
defaults:{
margins:'0 5 0 0',
pressed: false,
toggleGroup:'btns',
allowDepress: false
},
items: [{
xtype:'button',
text: 'Spaced',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 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: 'Align: top',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align top');
}
},{
xtype:'button',
text: 'Align: middle',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'middle'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'align middle');
}
},{
xtype:'button',
text: 'Align: stretch',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'stretch'
},
defaults:{margins:'0 5 0 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({
layoutConfig: {
padding:'5',
align:'stretchmax'
},
defaults:{margins:'0 5 0 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:'hbox',
layoutConfig: {
padding: '0 10 10'
},
defaults:{
margins:'0 5 0 0',
pressed: false,
toggleGroup:'btns',
allowDepress: false
},
items: [{
xtype:'button',
text: 'Flex: All even / Align: middle',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'middle'
},
defaults:{margins:'0 5 0 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'
}]
}, 'flex all even');
}
},{
xtype:'button',
text: 'Flex: Ratio / Align: top',
handler: function(){
replace({
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 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'
}]
}, 'flex ratio');
}
},{
xtype:'button',
text: 'Pack: start / Align: middle',
handler: function(){
replace({
layoutConfig: {
padding:'5',
pack:'start',
align:'middle'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}, 'pack start');
}
},{
xtype:'button',
text: 'Pack: center / Align: middle',
handler: function(){
replace({
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'pack center');
}
},{
xtype:'button',
text: 'Pack: end / Align: middle',
handler: function(){
replace({
layoutConfig: {
padding:'5',
pack:'end',
align:'middle'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4',
margins:'0'
}]
}, 'pack end');
}
}]
}]
}]
});
});

常用的配置项也是align,pack和flex（与vbox一个意思）。

align : String

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

top : Default
子项目被布置在容器垂直方向的顶部

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

stretch :
子项目在垂直方向上被延长，充满容器的高度

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

与vbox不同的是，它描述的是上下的位置。如top，middle。而vbox描述的是水平相对位置，如left，center。

pack : String

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

start : Default
子项目在容器的左侧被装在一起

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

end :
子项目在容器的右侧被装在一起

这个参数与vbox也恰恰相反。