sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局:
1.HBox:
HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示代码:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
如上所示,凡是layout被定义为hbox的容器,它的子组件都将会在水平方向按顺序排列,并且会根据我们为子组件配置的flex属性来分配他们的空间占比.并填充满屏幕,
在这里,我们定义了一个父容器container,并将它的layout布局属性设置为hbox,接着我们定义了两个panel子组件,他们会在水平方向上排列,
一个输出message list,一个输出message preview,由于message list的flex值为1,message preview的flex值为2,
那么在整个水平布局中message list的占比为1/(1+2),message preview的占比为2/(1+2),
整体效果大致如下:
2.VBox
vbox即vertical box,我们这里将其称之为垂直布局,vbox跟hbox类似,只是将水平布局换成了垂直纵向的
我们将上面的代码的layout属性改成vbox,如下:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
那么整个容器的显示效果则变成纵向的:
vbox跟hbox有点类似于android原生开发中的liearnlayout布局,flex就类似于layout_weight属性;
vbox跟hbox的实现原理也比较简单,主要就是利用了css3中的flexbox布局来实现的,感兴趣的同学可以去研究下,这里我提供两个flexbox的链接:
http://bbs.9ria.com/thread-195131-1-1.html
http://www.w3cplus.com/css3/flexbox-basics.html
大家感兴趣的可以去看看
3.Card Layout
card layout我们这里把它称为卡片布局,顾名思义,布局layout属性定义为card的布局的容器的子组件将会像卡片一样一层层地叠加在一起,并全屏展示,最顶层的组件会覆盖其他组件,当我们需要显示其他子组件的时候我们可以通过激活的函数将其显示出来:
这里我们演示了一段示例代码:
var panel = Ext.create('Ext.Panel', {
layout: 'card',
items: [
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
}); panel.setActiveItem(1);
我们定义了一个panel组件,并将其定义为card布局,我们在这里给他定义了四个子组件,并通过setActiveItem(1)来激活第二个组件,
当你需要激活其中的某个子组件让其显示时可以通过setActiveItem(别名或者子组件索引)的方式让指定的组件显示出来
使用card布局的组件有一个好处就是他的子组件在被激活切换的时候可以配置系统已经定义的一些切换动画效果,具体的演示我们将会在后面的实际项目中进行演示
layout: {
type: "card",
animation: "slide"
}
当然你也可以动态地在切换子组件的时候设置动画,如下:
父组件对象.animateActiveItem("viewTab", {type: "slide", direction: "right"});
4.Fit Layout
fit即填充的意思,fit layout的作用就是将整个容器填充到界面中全屏显示,它的作用跟设置组件的fullscreen:true是一样的,
直接将组件的layout属性设置为:fit即可,没有太多复杂的内容,
下面是示例代码
var panel = Ext.create('Ext.Panel', {
width: 200,
height: 200,
layout: 'fit', items: {
xtype: 'panel',
html: 'Also 200px by 200px'
}
});
5.Docking
docking布局,我们这里将其称为悬停布局,跟上面的4种布局不同,docking布局是给子组件设置的,通过给子组件配置docked来实现,docked有top,bottom,left,right四种属性,分别对应上、下、左、右四个位置,相当于css中的fit position,当子组件配置了这个属性后,它将始终展现在你配置的位置并且不受父组件布局的影响,我们来看下示例代码:
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
}
]
});
这里我们给container的第一个子组件设置了一个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
}
]
});
效果如下:
以上便是sencha touch中比较常用的几个布局,下一讲我们将开始通过实际的项目练习来讲解sencha touch的其他知识
sencha touch 入门系列 (九) sencha touch 布局layout的更多相关文章
- sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
- sencha touch 入门系列 (二)sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...
- sencha touch 入门系列 (七)sencha touch 类系统讲解(上)
在mvc结构的基础上,sencha touch又使用了sencha公司为extjs4开发出来的类系统,在面向对象的编程语言中,类是对对象的定义,它描述了对象所包含的大量属性和方法. 跟面向对象语言类似 ...
- sencha touch 入门系列 (九)sencha touch 视图组件简介
对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control ...
- sencha touch 入门系列 (六)sencha touch运行及代码解析(下)
接着上一讲,通过index.html里development.js对app.json里js资源文件的解析,app.js便被index.html引入了, app.js是整个项目的程序入口,在项目完成时使 ...
- sencha touch 入门系列 (三)sencha touch 项目创建
通过上一章节的学习,我们的开发环境已经配置好了,接下来我们开始创建第一个sencha touch的项目,网络上很多sencha touch的教程都是手动搭建项目的, 不过手动搭建的项目缺少一些senc ...
- sencha touch 入门系列 (一)sencha touch 简介
参考链接:http://mobile.51cto.com/others-278381.htm Sencha touch 是基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合J ...
- sencha touch 入门系列 (五)sencha touch运行及代码解析(上)
由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...
- sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析
通过上一章节的操作,我们的项目已经创建完成了, 大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用, 接下来,我们展开我们项目,如图所示: 一.目录结构 1. .s ...
随机推荐
- org.hibernate.hql.internal.ast.QuerySyntaxExceptionunexpected token: on near line 1
select d.content,count(s.status) from MesmachineStatus s , Mesmachinestatusdetail d where s.status=d ...
- NGUI使用教程 安装NGUI插件
我的使用的是unity4.2,大家可以去官网下载最新版本的http://unity3d.com/unity/download作为一个开发人员安装编译器是最基本的常识,相信大家都能正确安装.安装成功号桌 ...
- 【转】【Mysql】MySQL添加用户、删除用户与授权
MySql中添加用户,新建数据库,用户授权,删除用户,修改密码(注意每行后边都跟个;表示一个命令语句结束): 1.新建用户 1.1 登录MYSQL: @>mysql -u root -p @&g ...
- javascript -- js正则表达式
正则表达式可以: 1.测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 2.替换文本.可以在文档中使用一个正则 ...
- 刚刚完成了在vs2013中通过 ef连接mysql数据库的工作。感觉没有想象中的简单。试了n次终于成功。故记录成功的方法,希望可以帮到大家
分两种情况,如果你是用entity framework 5.0的时候 mysql-connector-net的版本不是很重要. MySQL For VisualStudio的版本也不重要 (这个不装就 ...
- (转)JavaScript内存模型
JavaScript对象内存模型 转自:http://blog.csdn.net/u010425776/article/details/53617292 推荐-JavaScript作用域链内存模型: ...
- Loadrunner C 编程_1
就目前的了解.Loadrunner的脚本语言其实和C没什么区别.他内部的好多机制都是C实现的. 不过是一种“类C” 所以我从几个方面分析 1:定义常量变量和C一样 2:在LR中,C的变量和LR的参数是 ...
- ubuntu-15.04-desktop-amd64.iso:ubuntu-15.04-desktop-amd64:安装Oracle11gR2
ubuntu 桌面版的安装不介绍. 如何安装oracle:核心步骤和关键点. ln -sf /bin/bash /bin/sh ln -sf /usr/bin/basename /bin/basena ...
- fireworks切图
下载安装完成后打开软件 打开一张图片 首选参数的撤销次数改成999 按住空格键 鼠标会变成小手的形状 这时候可以拖拽图像 找到切片工具 记住缩放比例的快捷键 ctrl+空格 放大某个区域 切的时候按住 ...
- 【java】java 设计模式(4):建造者模式(Builder)
工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象,所谓复合对象就是指某个类具有不同的属性,其实建造者模式就是前面抽象工厂模式和最后的Test结合起来得到 ...