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 ...
随机推荐
- [转]Handler学习笔记(二)
一.一个问题 有这样一个问题值得我们思考,若把一些类似于下载的功能(既耗时且不一定有结果)写在Activity(主线程)里,会导致Activity阻塞,长时间无响应,直至页面假死(如果5秒钟还没有完成 ...
- 关于Trie树的模板
Trie树又称单词查找树,Trie树,是一种树形结构.是一种哈希树的变种.典型应用是用于统计.排序和保存大量的字符串(但不仅限于字符串),所以常常被搜索引擎系统用于文本词频统计. 它的长处是:利用字符 ...
- [Eclipse] 项目编码
一.修改eclipse的新建项目的编码 在菜单栏的 Window->Preferences->General->Workspace->Text file encoding 将其 ...
- 不可在 for 循环体内修改循环变量,防止 for 循环失去控制
不可在 for 循环体内修改循环变量,防止 for 循环失去控制. #include <iostream> /* run this program using the console pa ...
- AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用Re ...
- 10 个很有用的高级 Git 命令(转)
英文原文:10 Useful Advanced Git Commands 迄今,我已经使用Git很长一段时间了,考虑分享一些不管你是团队开发还是个人项目,都受用的高级git命令. 1. 输出最后一次提 ...
- linux -- ubuntu 14.10开机出现错误“Error found when loading /root/.profile”解决
修改完root权限自动登录后,发现开机出现以下提示: Error found when loading /root/.profile stdin:is not a tty ………… 解决方法:在终端中 ...
- 页面的checkbox框的全选与反选
if (typeof jQuery == 'undefined') { alert("请先导入jQuery");} else { jQuery.extend({ ...
- php下保存远程图片到本地的函数
<?php header("content-type:text/html;charset=utf-8"); function GrabImage($url,$filename ...
- 访问GitLab的PostgreSQL数据库
1.登陆gitlab的安装服务查看配置文件 cat /var/opt/gitlab/gitlab-rails/etc/database.yml production: adapter: postgre ...