extjs 箱子布局
a.flex 配置项
flex 配置项不是设置在布局上,而是设置在子项的配置项。每个子项相对的 flex 值都会与全体子项 flex 累加的值相比较,根据此结果,处理每个子项的 flex 最后是多少。若不设置子项的 flex,表示不对子项作自适应尺寸的处理,相当于 flex = 0 的子项或 flex = undefined 的时候,表示子项不会自伸缩处理,而采用最初的尺寸。
{
layoutConfig: {
padding:'5',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:3,
margins:'0'
}]
}
当然我们可以 Vbox 布局中内嵌 hbox 布局,或者 hbox 中内嵌 vbox,HBox 和 VBox 之间是可以允许嵌套布局的,但实际不必如此手动去做, Ext 为我们提供了“对齐 align/pack”的这一对方向各异的调整配置,
代替了上述“内嵌”的这一种稍微让人感觉别扭。容器中每一个子项都遵循用户指定的 align/pack 对齐方式。一般设置的地方是在容器的 layoutConfig 配置项对象中,如下面某一个容器的代码片断:
对于垂直布局的 VBox 而言,属性 align 就是水平对齐的设置了,align 有以下可选项:
键值 作用
left 居左,从容器的 left开始水平对齐。这是系统默认的选项。
center 居中,从容器的mid-width开始垂直对齐。
stretcn 拉伸子项以填充容器的水平宽度。
stretcnmax 拿最宽的那个子项拉伸,适应容器的水平宽度。
属性pack是控制容器里面的子项是如何停靠的,这是垂直方向本身的对齐。有如以下设置:
键值 作用
start 居顶,从容器的top停靠子项。这是系统默认的选项。
center 居中,也就是子项都从容器的mid-height上开始停靠。
end 居底,从容器的底部边边开始往上摆子组件。
对于水平布局的HBox而言,align就是决定如何垂直对齐,align的可选项有如下:
键值 作用
top 顶部对齐,从容器的top开始垂直对齐。
middle 居中对齐,从容器的middle开始垂直对齐。
stretch 拉伸子项以填充容器的垂直高度。
stretchmax 拿最高的那个子项拉伸,适应容器的垂直高度。
pack的可选项有以下几种:
键值 作用
start 居左,从左边开始排列内容。
center 居中,也就是从容器的mid-width开始停靠内容。
end 居右,从容器的右边开始停靠内容。
BoxLayout 可设置外边距(margins)。关于 defaultMargins,就是如果不制定每个子项的 margins 属性,那么就会使用默认的 margins。
默认为 {top:0, right:0, bottom:0, left:0} 。margin 属性接纳的格式也可以是字符串的,规定为空格隔开,数字类型的 margin 值。各个方向的排列顺序为 CSS 的顺序:
如果只是一个值,就是各个方向都是这个值。
如果有两个值,那么第一个值代表是上下方向的值,第二值则是左右方向的值。
如果有三个值,第一个值是顶部的值,第二个值是左右两边的值,第三个值是底部的值。
如果有四个值,分别代表就是顶部、右边、底部和左边的值(为方便记忆,可理解为顺时针方向)。
BoxLayout 可设置内边距(padding)。跟 defaultMargins 差不多,padding 属性接纳的格式也可以是字符串的,其格式规定为空格隔开,数字类型的 margin 值。各个方向的排列顺序为 CSS 的顺序。
extjs 箱子布局的更多相关文章
- ExtJs常用布局--layout详解(含实例)
序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...
- Extjs Column布局常见问题及解决方法
原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...
- Extjs Vbox布局方式,以及align种类,flex,pack属性含义简介
VBox布局方式,熟悉下一下几个主要属性: 一.align:字符类型,指示组件在容器内的对齐方式.这个是基于容器的左上角来排列的.pack不同,pack是根据容器的最上边来显示的. 1.left(默认 ...
- 【ExtJS】 布局Layout
布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extj ...
- 自己动手写UI库——引入ExtJs(布局)
第一: 来看一下最终的效果 第二: 来看一下使用方法: 第三: Component类代码如下所示: public class Component { pub ...
- ExtJs FormPanel布局
FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...
- 3.ExtJs常用布局--layout详解(含实例)
转自:https://blog.csdn.net/fifteen718/article/details/51482826
- Extjs Form用法详解(适用于Extjs5)
Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Ex ...
- extjs 学习笔记(二)
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
随机推荐
- 【4412嵌入式开发板学习笔记】认识uboot
转自迅为讨论群:http://www.topeetboard.com 重要说明:这份笔记不是4412开发配套的,是我在网上看视频的时候下载上课老师的笔记后修改的.所以我试了一下笔记上的uboot命令, ...
- MMORPG大型游戏设计与开发(客户端架构 part7 of vegine)
我在讲述某个东西的时候总喜欢从简单的入手,然后从互相关联的地方联合讲解,因为时间关系所以没能讲的十分详细,这点引以为憾,希望得到大家的谅解.这一节讲述的是微引擎(vengine)比较简单的一个模块,那 ...
- POJ3013 Big Christmas Tree[转换 最短路]
Big Christmas Tree Time Limit: 3000MS Memory Limit: 131072K Total Submissions: 23387 Accepted: 5 ...
- u3d_Shader_effects笔记5 第二章 通过UV,进行纹理移动
1.前面心情 公司最近打包,像我等小弟闲着,看代码容易困,没事偷着学shader,不过还是要多交流才行. 2.本文参考 这次参考比较多:由texture uv延伸问题多,主要是不明白变量定义: htt ...
- Oracle Update 语句语法与性能分析 - 多表关联
Oracle Update 语句语法与性能分析 - 多表关联 为了方便起见,建立了以下简单模型,和构造了部分测试数据: 在某个业务受理子系统BSS中, SQL 代码 --客户资料表 create ...
- 判断一个变量的类型Object.prototype.toString.call
var num = 1;alert(Object.prototype.toString.call(num)); // [object Number]var str = 'hudidit.com';al ...
- Entity Framework Code Migration 新建、更新数据库
在Package Manager Console中执行 A:新建数据库: 1.Add-Migration init[名称](为挂起的Model变化添加迁移脚本) 2.Update-Database(将 ...
- windows下安装memcache的基本步骤
本文主要解决的是window下memcached的安装的问题,在使用的过程中经常会被第一步环境的配置搞混,本文结合我的配置过程和遇到的问题,做一个总结 1,开启php memcache的扩展,在文件 ...
- 【转】mysql触发器的实战(触发器执行失败,sql会回滚吗)
1 引言Mysql的触发器和存储过程一样,都是嵌入到mysql的一段程序.触发器是mysql5新增的功能,目前线上凤巢系统.北斗系统以及哥伦布系统使用的数据库均是mysql5.0.45版本,很多程 ...
- chrome升级后LODOP打印插件无法使用
今天帮朋友使用LODOP实现一个套打程序时,发现LODOP打印插件在chrome下始终无法使用.分析后发现是自己才升级了chrome,chrome新版默认是禁用npapi的,因此需要手动启用一下,启用 ...