第二章Sencha Touch 布局(1)Box布局

Sencha Touch 布局（1）Box布局
更多ST资料请访问：
Sencha Touch里的布局有五种
hbox
vbox
card
fit
auto[默认]
实际上可以分为Box布局和Fit布局两种。

Sencha touch里的布局应该理解为：该控件内部子项的排列方式。

我们今天先来看看box布局
Box布局
顾名思义，box布局就是一个个的box组成的。

hbox: 水平排列、垂直居中、靠左置顶
vbox: 竖直堆叠、水平居中、靠上置顶
hbox
Ext.application({
onReady:function(){
var pn1 = new Ext.Panel({
fullscreen:true,
layout:'hbox',
items:[
{xtype:'button',text:'按钮1',width: 100,height: 50},
{xtype:'button',text:'按钮2',width: 100,height: 50},
{xtype:'button',text:'按钮3',width: 100,height: 50}
]
});
}
});
运行结果如图所示：
Vbox
将以上的hbox改为vbox
Vbox变型：
Ext.application({
onReady:function(){
var pn1 = new Ext.Panel({
fullscreen:true,
layout:'vbox',
defaults:{flex:1},
items:[
{xtype:'button',text:'按钮1'},
{xtype:'button',text:'按钮2'},
{xtype:'button',text:'按钮3'}
]
});
}
});
Vbox变型2：
在上面代码的defaults中加入width : '80%'，得到下图
经典九宫格布局
Ext.application({
onReady:function()
{
var pn1 = new Ext.Panel({
fullscreen:true,
layout:'vbox',
defaults:{flex:1,height:'100%'},
items:[
{
xtype:'panel',
layout:'hbox',
items:[
{xtype:'button',text:'按钮1'},
{xtype:'button',text:'按钮2'},
{xtype:'button',text:'按钮3'}
]
},
{
xtype:'panel',
layout:'hbox',
items:[
{xtype:'button',text:'按钮1'},
{xtype:'button',text:'按钮2'},
{xtype:'button',text:'按钮3'}
]
},
{
xtype:'panel',
layout:'hbox',
items:[
{xtype:'button',text:'按钮1'},
{xtype:'button',text:'按钮2'},
{xtype:'button',text:'按钮3'}
]
}
]
});
}
});
松散九宫格：
更多ST资料请访问：。