Sencha-概念-Layouts(布局)(官网文档翻译8)
介绍和HBox
布局描述了在您的应用程序的组件的大小和位置。例如,一个电子邮件客户端可能具有固定到左边的消息的列表,以说,可用的宽度的三分之一,和一个消息观看面板中的屏幕的其余部分。
我们可以做到这一点使用一个hbox布局和能力“柔性”内的项目。弯曲装置划分的可利用面积,根据每个子组件的柔性,因此要实现上面的例子中,我们可以设置这样的弯曲:
此代码很简单,我们只需要指定“盒子”的布局,在任何容器,然后提供一个Flex每个子组件(在这种情况下,面板):
Ext.create('Ext.Container',{fullscreen:true,layout:'hbox',items:[{xtype:'panel',html:'message list',flex:1},{xtype:'panel',html:'message preview',flex:2}]});
这将创建一个容器填满整个屏幕,并在它里面创建一个邮件列表面板和预览面板。它们的相对柔性的configs中的1和2装置的消息列表中会占用可用的宽度的三分之一,与预览采取其它三分之二。如果我们的集装箱的第一个项目是300像素宽,(FLEX:1)将是100px宽,第二个(软硬度:2),200像素宽。
hbox是最有用的的布局之一,因为它可以在很宽的各种水平的组合安排组件。更多的例子,请参阅HBox的文件。
VBox中的布局
很像是HBox,VBox是刚刚垂直而不是水平。同样地,我们可以可视化这一点很容易作为一组层叠的框:
几乎是相同的代码来创建这个上面的例子-我们只是交易的布局:“盒子” 的布局:“VBOX” :
Ext.create('Ext.Container',{fullscreen:true,layout:'vbox',items:[{xtype:'panel',html:'message list',flex:1},{xtype:'panel',html:'message preview',flex:2}]});
如果我们的集装箱为300像素高,第一个面板(FLEX:1)将100px高,第二个(FLEX:2),高200像素。更多的例子,请参阅VBox的文件。
卡布局
有时你想显示屏幕的信息,但你只得到了一个小屏幕工作。TabPanels和旋转木马,都让你看到一个屏幕一次,下它们都使用卡片布局。
卡片布局需要将它应用到和尺寸的当前活动的资料完全填补的集装箱,集装箱的尺寸。然后,它隐藏其余的物品,让你改变哪一个是当前可见的,但一次只显示一个:
这里的灰色方块是我们的容器,它里面的蓝色方块是当前激活的卡。其他三个卡从视图中隐藏,但可以在以后的交换。虽然它不是太普通了,直接创牌的布局,你可以这样做,是这样的:
var panel =Ext.create('Ext.Panel',{layout:'card',items:[{html:"First Item"},{html:"Second Item"},{html:"Third Item"},{html:"Fourth Item"}]});panel.setActiveItem(1);
在这里,我们创建了一个面板与卡片布局和后来成立的第二项活动(活动项目的索引是从零开始的,所以对应的第二个项目)。通常情况下,你最好使用Tab平板或木马。
适合布局
适合布局可能是最简单的布局。它的作用是使一个的孩子组成部分适合它的父容器的大小。
例如,如果你有一个200像素200像素的父容器,并给它一个单一的子组件和一个“合适”的布局,子组件也将是200像素200像素的:
var panel =Ext.create('Ext.Panel',{width:200,height:200,layout:'fit',items:{xtype:'panel',html:'Also 200px by 200px'}});Ext.Viewport.add(panel);
请注意,如果你到一个合适的布局容器中添加一个以上的项目,只有第一个项目将是可见的。如果你想之间进行切换多个项目的布局,而不是使用该卡。
对接
每一个布局是它里面的对接项目。通过对接使您放置其他组件的父容器,调整大小的其他必要的项目上,右,下或左边缘。
例如,回来给我们的第一hbox的布局上面,让我们想象一下,这样我们要停靠在顶部的另一个组件:
这是经常使用的东西,如工具栏和横幅,并很容易实现停靠:“顶级”配置:
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}]});
您可以添加任意数量的对接项目,只需要提供你要停靠的子组件的码头配置。您还可以停靠任何一方的项目,例如,如果我们想做到这一点与我们以前的VBOX的例子:
我们可以实现通过指定停靠:'左':
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}]});
您可以添加多个对接项目,每边(例如对接几个项目,“自下而上”的位置)。
包装和对齐(HBox中)
包装和对齐控制你的孩子如何元件排列在你的布局。“打包”是指轴的当前布局,而“对齐”是相反的。所以,在一个HBox布局的,包指的横轴,和对准垂直轴。下面的例子说明其中的差别。
包装和对齐(VBox中)
延伸阅读
布局是煎茶触摸生态系统只是其中的一部分。要了解更多有关的框架,以及它是如何工作的,我们提出以下建议:
- 组件和容器
- 等级制度
- 在数据包
- 入门
转载于:https://www.cnblogs.com/cheman/archive/2012/12/26/2834725.html
Sencha-概念-Layouts(布局)(官网文档翻译8)相关推荐
- Sencha-概念-Events(事件)(官网文档翻译10)
Sencha-概念-Events(事件)(官网文档翻译10) 煎茶Touch 2的组件和类的触发广泛的事件,在其生命周期的不同点.活动让你的代码,它周围的变化作出反应,并在煎茶触摸是一个关键的概念. ...
- Sencha-命令-CMD(与Touch的结合运用)(官网文档翻译30)
Sencha-命令-CMD(与Touch的结合运用)(官网文档翻译30) 介绍 本指南介绍的过程中,使用Sencha Cmd的煎茶触摸应用程序启动的煎茶生成的应用程序命令和结束正在运行的应用程序. 本 ...
- Sencha-组件-Chart(图表)(官网文档翻译17)
Sencha-组件-Chart(图表)(官网文档翻译17) 本指南提供了使用的煎茶触摸2.1的抽奖及图表包的概述.这些软件包,可以在一个通用的方式来创建跨浏览器和跨设备的图形. 在过去的几个月中,平局 ...
- Nginx 官网文档翻译汇总
Nginx 官网文档,各个模块的手册在这里. Nginx 中文文档 - 淘宝翻译 改版后的新 Nginx 官网文档 概述 新手指南 控制 Nginx 管理员指南 Admin Guide 安装 基本功能 ...
- elastic官网文档翻译来.1
elastic以后简称es. es基本概念: 1.nrt:一种近实时搜索平台,延迟微小(通常1s) 2.cluster:数据集群分布存储,易扩展. 3.node:节点是单个服务器,存储数据,支持集群索 ...
- Docker 官网文档翻译汇总
官方文档地址 Guide Docker 入门 Docker 入门教程 方向和设置 容器 服务 swarm 集群 stack 部署应用 概述 用 Docker 进行开发 在 Docker 上开发应用 应 ...
- IntelRealSense 深度相机 测量物体的实际长度 —— rs-measure 官网文档翻译
总览 本教程显示了使用深度数据测量真实世界距离的简单方法. ## Note: 测量真实世界中物体的维度是深度相机的一个明显的应用之一.此样本不是适当的测量工具,而是展示关键概念.使用更好的算法可以显著 ...
- Drill官网文档翻译六:存储插件的注册
我们可以通过存储插件连接到本地文件系统,Hive,HBase,或是其他的数据源.在Drill的web界面的存储插件配置tab,你可以查看修改这些插件的配置.如果不支持HTTPS(默认就没有),你可以访 ...
- influxdb官网文档翻译
存储引擎 存储引擎将多个组件结合在一起,并提供用于存储和查询series数据的外部接口. 它由许多组件组成, 每个组件都起着特定的作用: In-Memory Index -- 内存中的索引是分片上的共 ...
最新文章
- WebStorm V2017.1版用于Angular2开发的环境设置
- 【数据挖掘知识点六】假设检验
- Visual Studio.NET
- JAVA --BYTECODE
- 贪心1--排队打水问题
- mysql 存储过程求和_MySQL - 存储过程和函数
- LeetCode 1155. 掷骰子的N种方法(DP)
- 完善区块链产业链 加速经济数字化转型
- 减少HTTP请求的方法
- 数据结构与算法分析(十)——母牛的故事
- 揭露一种通过网络实施ATM诈骗的手段!
- 令人困惑的strtotime
- Gateway配合sentinel自定义限流_Spring Cloud Gateway网关如何快速实施限流方案?-Part 6...
- QT 读取txt 文件
- 这是我看过把Spring Cloud核心组件讲的最明白的一个故事了
- 全球与中国电子柜锁市场深度研究分析报告
- [NDK]-搭建ndk-build环境
- 星星之火OIer:总分题解
- linux 解压参数 zxvf,在linux下面解压用的zxpf是什么意思,它跟zxvf有啥区别
- Android 检测键盘是否显示及隐藏键盘