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 ,
margin: '0 0 0 0' ,
layout: {
type: 'hbox' ,
align: 'stretch'
},
items: [{
flex: 1,
style: 'border:1px red solid' ,
margin: '0 20 0 0' ,
items: [{
xtype: 'button' ,
text: '第一' ,
margin: 6
}]
},{
flex: 2,
style: 'border:1px red solid' ,
margin: '0 20 0 0' ,
html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'
},{
flex: 3,
style: 'border:1px red solid' ,
items: [{
xtype: 'button' ,
text: '第三' ,
margin: 6
}]
}]
});
|
有两个属性需要关注一下:
1、 align: 'stretch',该属性是设置容器里‘小容器’的对齐方式。
2、 flex属性是设置‘小容器’的宽度比率,具体的计算方式请参看文档。 当然还有其他的属性,例如:style、margin、padding,这些属性主要是设置样式的。
- VBoxLayout垂直箱子布局,即把组件垂直的放置在容器中。
代码清单:
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 ,
margin: '0 0 0 0' ,
layout: {
type: 'vbox' ,
align: 'stretch'
},
items: [{
flex: 1,
style: 'border:1px red solid' ,
margin: '0 0 10 0' ,
items: [{
xtype: 'button' ,
text: '第一' ,
margin: 6
}]
},{
flex: 2,
style: 'border:1px red solid' ,
margin: '0 0 10 0' ,
html: '<div style="border:1px red dashed;margin:6px;">第二个小箱子</div>'
},{
flex: 3,
style: 'border:1px red solid' ,
items: [{
xtype: 'button' ,
text: '第三' ,
margin: 6
}]
}]
});
|
FitLayout(自适应布局)
FitLayout是布局的基础类,对应面板布局配置项的名称为fit,使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有一个会被显示。
代码清单:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var viewport = new Ext.Panel({
fullscreen: true ,
margin: '0 0 0 0' ,
layout: 'fit' ,
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
|
var funBar = {
xtype: 'toolbar' ,
title: 'CardLayout例子' ,
dock: 'top' ,
scroll: 'horizontal' ,
height: 30,
items: [{
xtype: 'button' ,
text: '桌面' ,
ui: 'back' ,
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' ,
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 被 刚子 最后编辑
分享到:
相关推荐
自己基本测试了下可用,不过没有放入总条数之类的,长度有限,他的原理就是可以动态修改传递的start 以及 limit,如果有其他参数请在 store里面放入baseParams 参数如: , baseParams : { sort : 'foodprice ...
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
移动Web应用,简单来理解就是针对移动终端优化过的Web 站点,终端用户通过支持Html5、Css3、Javascript标准的Webkit内核浏览器访问部署在服务器的Web应用。
Sencha Touch是针对Mobile应用而开发的一套技术框架,它基于HTML5技术...本书发表于2012年2月,详细介绍了Sencha Touch 1.1的内容。虽然目前Sencha Touch2.0已经发布,但本书讲述的内容依然系统且具有极高的参考价值。
Sencha Touch 2入门教程之MVC例子程序源代码 用Sencha Touch 2 之MVC模式写的一个登录界面的例子
sencha touch 折叠list
Sencha Touch开发的项目《般若人生》源码
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
Sencha Touch 2 简介知识,环境搭建,组件介绍和布局事例
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch 2.4.0最新版 原版包下载
sencha touch list demo
《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...
sencha touch cookbook 英文高清文字版 !
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
sencha touch grid