本文已添加至Sencha Touch 2快速入门系列索引:http://blog.csdn.net/ardy_c/article/details/7544470
转载请注明出处:http://blog.csdn.net/ardy_c/article/details/7542256
布局(Layouts)是什么,相信也不用我在这里多说。无论是网页,还是手机应用,我们都需要给自己的版面进行布局。一方面是为了方便用户阅读,一方面是为了版面美观整齐,另外...还有很多很多原因,有兴趣的童孩可以自己去总结下 = =||,和主题无关的,这里不扯谈了,免得浪费大家时间。Sencha Touch 2为了方便大家使用,预定义了几种布局的方式:HBox、VBox、Card、Fit、Docking。
HBox(水平盒子)
正如标题所示,Hbox(水平盒子)是将处于其中的子元素按水平排列起来。如何实现这种布局方式?我们只需要将容器的layout属性设置为'hbox'即可。下面我们来看看一段简单的代码:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
上面代码创建了一个容器,并采用了hbox的布局方式。在两个子元素里,分别设置了属性flex:1和flex:2。flex属性,是根据比例的方式来计算该组件所占的宽度(因为这里使用的是在水平方向上的排列,flex所计算的就是水平方向上所占的位置,因此这里是定义了宽度;如果是使用vbox,flex计算的就是组件的所占的高度了)。flex的计算方法和我们平时所使用的百分比定义宽度有点区别。例如,这里定义了两个同级元素的flex值分别为1和2,那么他们总的宽度就是3(1+2),也是我们平时习惯使用的100%。然后,flex值为1的占的宽度是1/3,即33.33%;flex值为2的占的宽度是2/3,即66.67%。通过上面的代码所建立的模型大概如下图:
Hbox
大家或者会想到,很多时候我们的内容不一定能占满屏,我们可能需要“左对齐”、“居中”、“右对齐”这些排列方式。可以,没问题!我们可以设置layout的align和pack属性即可实现各种对齐方式。大家可以运行一下以下这段代码看看效果:
Ext.application({
name: 'sample',
launch: function() {
var container = Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'hbox',
align: 'start',
pack: 'start'
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'HBox Layout'
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Pack: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setPack('start') }, pressed: true },
{ text: 'Center', handler: function() { layout.setPack('center') } },
{ text: 'End', handler: function() { layout.setPack('end') } }
]
}
]
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Align: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setAlign('start'); }, pressed: true },
{ text: 'Center', handler: function() { layout.setAlign('center'); } },
{ text: 'End', handler: function() { layout.setAlign('end'); } },
{ text: 'Stretch', handler: function() { layout.setAlign('stretch'); } }
]
}
]
},
{ xtype: 'button', text: 'Btn 1', margin: 2 },
{ xtype: 'button', text: 'Btn 2', margin: 2 },
{ xtype: 'button', text: 'Btn 3', margin: 2 }
]
});
var layout = container.getLayout();
}
});
上面代码中,我们将一个数据对象传入到layout中,用于设置layout。数据对象中包含有type、align、pack。type是设置采用哪种布局方式;align在hbox模式中,是指垂直方向上的对齐方式,相当于css里的valign,可选值有start(开始端对齐 / 顶端对齐)、center(居中)、end(末端对齐 / 底部对齐)、stretch(伸展,填满垂直方向上的空间);pack在hbox模式中,是指水平方向上的的对齐方式,相当于css里的align,可选值有start(开始端对齐 / 左对齐)、center(居中)、end(末端对齐 / 右对齐)。运行上面代码,点击下各个按钮,你就可以看到各个值相对应的效果了。
VBox(垂直盒子)
VBox和HBox,非常相似,不同的只是换了排列的方向上,我们来看下面一段代码:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
代码解析:
这段代码和HBox的第一段代码唯一不同的地方就是这里的layout是设为'vbox',其它的全部一样。这次flex所计算的就是高度,而非宽度了。大概效果如下图所示。
VBox
在对齐方式上,与HBox有点区别,align和pack的功能正好相反,但可选值不变。align在vbox模式中,是指水平方向上的对齐方式,相当于css里的align,可选值有start(开始端对齐 / 左对齐)、center(居中)、end(末端对齐 / 右对齐)、stretch(伸展,填满水平方向上的空间);pack在vbox模式中,是指垂直方向上的的对齐方式,相当于css里的valign,可选值有start(开始端对齐 / 顶端对齐)、center(居中)、end(末端对齐 / 底部对齐)。运行一下以下代码看看效果:
var container = Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'vbox',
align: 'start',
pack: 'start'
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'VBox Layout'
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Pack: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setPack('start') }, pressed: true },
{ text: 'Center', handler: function() { layout.setPack('center') } },
{ text: 'End', handler: function() { layout.setPack('end') } }
]
}
]
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Align: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setAlign('start'); }, pressed: true },
{ text: 'Center', handler: function() { layout.setAlign('center'); } },
{ text: 'End', handler: function() { layout.setAlign('end'); } },
{ text: 'Stretch', handler: function() { layout.setAlign('stretch'); } }
]
}
]
},
{ xtype: 'button', text: 'Btn 1', margin: 2 },
{ xtype: 'button', text: 'Btn 2', margin: 2 },
{ xtype: 'button', text: 'Btn 3', margin: 2 }
]
});
var layout = container.getLayout();
Card(卡片方式)
当你需要显示很多信息时,一个屏的容量显然不能满足你的需求,这时你可以选用Card(卡片方式)布局方式。卡片方式是指容器内存在多个item,每次只激活显示其中一个,并将该item填满容器,其余的items将被隐藏起来,当有需要的时候,通过调用方法将需要的item激活。
Ext.application({
name: 'sample',
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'card', // 将容器的布局方式设置为卡片方式
items: [
{
xtype: 'toolbar', // 创建一个工具栏
docked: 'top', // 停靠在顶部
items:[ // 创建四个按钮
{
xtype: 'button',
text: 'First',
handler: function(){
panel.setActiveItem(0); // 激活第一个模块,即第一屏内容
}
},
{
xtype: 'button',
text: 'Second',
handler: function(){
panel.setActiveItem(1); // 激活第二个模块
}
},
{
xtype: 'button',
text: 'Third',
handler: function(){
panel.setActiveItem(2); // 激活第三个模块
}
},
{
xtype: 'button',
text: 'Fourth',
handler: function(){
panel.setActiveItem(3); // 激活第四个模块
}
}
]
},
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
Ext.Viewport.add(panel);
panel.setActiveItem(0); // 默认激活第一个模块
}
});
代码解析:
以上代码中,在容器内部建立了一个工具栏和四个屏的信息。工具栏自己使用了docked属性,停靠于容器的顶部,因此不当作card处理。后面四个子元素模块被视为card,按照定义时的顺序保存于一个数组里面,通过父容器的setActiveItem(index)方法来激活显示的模块信息。而toolbar中,每个按钮的点击事件的处理中都调用激活相应模块的方法。运行上面代码体验一下效果。
Fit(自适应方式)
Fit(自适应方式),很容易理解,它就是自动将父容器填满。如下图所示,
Fit
例如一个宽200px,高200px 大小的父容器,设置了layout方式是fit,并且只有一个子组件,那么该子组件也是宽200px高200px。该例子的实现可以参考以下代码:
var panel = Ext.create('Ext.Panel', {
width: 200,
height: 200,
layout: 'fit',
items: {
xtype: 'panel',
html: 'Also 200px by 200px'
}
});
Ext.Viewport.add(panel);
Docking(停靠)
容器在使用各种布局方式时,都允许将子组件Docking(停靠)在容器里的top(上)、bottom(下)、left(左)、right(右)四条边上,而其它子组件也会根据需要调整大小。例如,我们修改一下第一个例子,代码如下:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
docked: 'top',
xtype: 'panel',
height: 20,
html: 'This is docked to the top'
},
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
我们为其多添加了xtype为'panel',docked为'top'的panel作为子组件。这样,就在原来的例子的基础上,多出了一个停靠在顶部的panel。因为该panel也占据了一定的高度,而原来的两个panel的高度也将自动缩小。大概效果如下图所示。当然,你也可以运行一下上方代码查看效果。
docked: 'top'
现在,我们修改一下第二个例子,看看当docked为left的时候是什么效果:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
docked: 'left',
xtype: 'panel',
width: 100,
html: 'This is docked to the left'
},
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
这次是docked:'left' 了,panel停靠容器内部的左边,占用了一定的宽度,因此,其它两个panel的宽度也自动收窄了。
docked: 'left'
以上就是Sencha Touch 2的几种布局方式。由于Sencha Touch 2是允许多层组件的嵌套,因此,我们也可以运用多种布局组合去完成我们页面排版。童孩们多做练习,看怎样布置你的app会更加美观、大方。