Sencha Touch 1.1培训教程第四章：Sencha Touch布局介绍
Sencha Touch 1.1培训教程第四章：Sencha Touch布局介绍
作者：廖 章 编辑整理：刚 子 来自：移动Web开发社区
在我们的Web应用开发中，页面的排版、布局很重要，用户就是通过页面操作来完成日常工作的。如果界面布局不合理、操作不方便，用户也不会对系统有好的印象、甚至有可能影响一个项目的成败。我自己的经验是，在开发某个功能模块时，除了仔细属性该模块的功能需求和业务需求外，还会在草稿纸上简单的把该功能的布局画出来（如果美工已经制作有页面模型外）。例如：
该图片为适合页面被自动缩小. 查看大图请点击.
Sencha Touch 的布局类似 Extjs 中的布局，常用的有： BoxLayout 、 HBoxLayout 、 VBoxLayout 、 FitLayout 、 CardLayout 。
BoxLayout、HBoxLayout、VBoxLayout（箱子布局）
BoxLayout是箱子布局，该布局类似于药店里放置中草药的大柜子里一个个小箱子那样，把组件放置在容器中（Container）中。BoxLayout是HBoxLayout和VBoxLayout这两个布局类的父类，一般很少直接使用。
- HBoxLayout是水平箱子布局，即把组件横排的放置在容器中。
代码清单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var
viewport =
new
Ext.Panel({
fullscreen:
true
,
//width: 500,
//height: 200,
margin:
'0 0 0 0'
,
layout: {
type:
'hbox'
,
//指定layout布局方式为HBoxLayout
align:
'stretch'
//布局里的‘小容器’拉伸,类似window桌面图片那样，拉伸到整个页面大
},
items: [{
flex: 1,
//所占宽度的比率
//height: 200,
style:
'border:1px red solid'
,
//自定义样式
margin:
'0 20 0 0'
,
//设置边框距离
items: [{
xtype:
'button'
,
text:
'第一'
,
margin: 6
}]
},{
flex: 2,
//height: 200,
style:
'border:1px red solid'
,
margin:
'0 20 0 0'
,
html:
'<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'
},{
flex: 3,
//height: 200,
style:
'border:1px red solid'
,
items: [{
xtype:
'button'
,
text:
'第三'
,
margin: 6
}]
}]
});
|
有两个属性需要关注一下：
1、 align: 'stretch'，该属性是设置容器里‘小容器’的对齐方式。
2、 flex属性是设置‘小容器’的宽度比率，具体的计算方式请参看文档。 当然还有其他的属性，例如：style、margin、padding，这些属性主要是设置样式的。
1、 align: 'stretch'，该属性是设置容器里‘小容器’的对齐方式。
2、 flex属性是设置‘小容器’的宽度比率，具体的计算方式请参看文档。 当然还有其他的属性，例如：style、margin、padding，这些属性主要是设置样式的。
- VBoxLayout垂直箱子布局，即把组件垂直的放置在容器中。
代码清单：
12345678910111213141516171819202122232425262728293031323334353637varviewport =newExt.Panel({fullscreen:true,//width: 500,//height: 200,margin:'0 0 0 0',layout: {type:'vbox',//指定layout布局方式为VBoxLayoutalign:'stretch'//布局里的‘小容器’拉伸},items: [{flex: 1,//所占宽度的比率//height: 200,style:'border:1px red solid',margin:'0 0 10 0',items: [{xtype:'button',text:'第一',margin: 6}]},{flex: 2,//height: 200,style:'border:1px red solid',margin:'0 0 10 0',html:'<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'},{flex: 3,//height: 200,style:'border:1px red solid',items: [{xtype:'button',text:'第三',margin: 6}]}]});
FitLayout（自适应布局）
FitLayout是布局的基础类，对应面板布局配置项的名称为fit，使用fit布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有一个会被显示。
代码清单：
CardLayout在sencha touch中是最常用的布局，模仿本地应用的页面转换效果主要通过它来体现出来。它是扩展自FitLayout布局，对应面板布局配置项的名称为card。该布局会包含多个子面板，但任何时候都只有一个子面板处于显示状态，这种布局经常用来制作向导和标签页。
代码清单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var
viewport =
new
Ext.Panel({
fullscreen:
true
,
//width: 500,
//height: 200,
margin:
'0 0 0 0'
,
layout:
'fit'
,
//指定layout布局方式为FitLayout
items: [{
style:
'border:1px red solid'
,
html:
'<div style="border:1px red dashed;margin:6px;">第一个小箱子</div>'
},{
style:
'border:1px blue solid'
,
html:
'<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'
}]
});
|
CardLayout（卡片式布局）
CardLayout在sencha touch中是最常用的布局，模仿本地应用的页面转换效果主要通过它来体现出来。它是扩展自FitLayout布局，对应面板布局配置项的名称为card。该布局会包含多个子面板，但任何时候都只有一个子面板处于显示状态，这种布局经常用来制作向导和标签页。
各个字面板之间切换的途径是调用setActiveItem方法，该方法接收一个子面板对象或id、索引作为参数。
代码清单：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
//工具栏-toolbar
var
funBar = {
xtype:
'toolbar'
,
title:
'CardLayout例子'
,
dock:
'top'
,
//工具栏放置的位置（必须的属性）：top-上,bottom-下,left-左,right-右
scroll:
'horizontal'
,
height: 30,
items: [{
xtype:
'button'
,
text:
'桌面'
,
ui:
'back'
,
//iconMask: true,
//iconCls: 'home',
style: btStyle,
handler:
function
(){
window.location = prefix +
'/index.action'
;
}
},{
xtype:
'button'
,
text:
'第一个子面板'
,
style: btStyle,
handler:
function
(){
changeItem(
'p1'
);
}
},{
xtype:
'button'
,
text:
'第二个子面板'
,
style: btStyle,
handler:
function
(){
changeItem(
'p2'
);
}
}]
};
//主界面
var
viewport =
new
Ext.Panel({
fullscreen:
true
,
margin:
'0 0 0 0'
,
layout:
'card'
,
//指定layout布局方式为CardLayout
activeItem: 0,
dockedItems: [funBar],
items: [{
id:
'p1'
,
style:
'border:1px red solid'
,
html:
'<div style="border:1px red dashed;margin:6px;">第一个小箱子</div>'
},{
id:
'p2'
,
style:
'border:1px blue solid'
,
html:
'<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'
}]
});
//切换子面板
var
changeItem =
function
(id){
viewport.setActiveItem(id,
'slide'
);
};
};
|
在 2012年01月10日 13:23 被 刚子 最后编辑