Ext3.2 布局——anchor layout
2014-02-13 00:09
225 查看
anchor layout 是一个有点意思的布局。简单的来说,在使用anchor布局的容器中,它的子组件都有一个anchor配置项,这个配置项表示该组件相对于父组件的位置。
上图是一个使用了anchor的viewport。viewport是一个特殊的容器,用来描述应用的可见区域,它会把自己渲染到document.body,并自动将自己调整到浏览器的大小。而使用了anchor的布局,则子组件会根据自身的anchor配置项的信息,随着浏览器大小改变而改变自己的大小。上述的图形就是再浏览器被压缩之后的大小。代码片段如下。
配置项anchor是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:
百分比 : 1到100之间的任何值,表示一个百分比。
第一个锚定值是组件在容器中所需占有的宽度百分比,第二个是高度百分比。例如:
偏移量 : 任何正数或负数值。
这是一个原始位置,第一个锚定位置是从右侧开始计算的偏移位置,第二个是从底部开始计算的偏移位置。例如:
侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或
'b')。
对于拥有特效的对象, 容器必须有一个固定的尺寸,或者有一个在渲染时定义的anchorSize配置值 。
混合值 :
如果需要,锚定值也可以是混合型。 例如,如果需要以距离容器右侧边缘50像素,容器高度的75%渲染,使用:
另外一个参数是anchorSize。默认情况下,AnchorLayout将会根据容器自身的尺寸计算锚定位置。 但是,使用AnchorLayout的容器可以提供一个用来指定锚定位置的anchorSize配置项。 如果指定了anchorSize, 布局管理器将会把它用作一个虚拟的容器,根据它的尺寸来计算 锚定位置,如果必要,允许容器与调整锚定位置的逻辑无关。这个现象很难解释。尤其当使用anchor:'right '的时候,就更加无法理解它到底是怎么计算组件的宽度的。这仍然是一个问题!
上图是一个使用了anchor的viewport。viewport是一个特殊的容器,用来描述应用的可见区域,它会把自己渲染到document.body,并自动将自己调整到浏览器的大小。而使用了anchor的布局,则子组件会根据自身的anchor配置项的信息,随着浏览器大小改变而改变自己的大小。上述的图形就是再浏览器被压缩之后的大小。代码片段如下。
Ext.onReady(function() { Ext.QuickTips.init(); var viewport = new Ext.Viewport({ layout : 'anchor', // anchorSize : { // width : 800, // height : 600 // }, items : [{ title : 'Item 1', html : 'Content 1', width : 500, anchor : 'right 20%' }, { title : 'Item 2', html : 'Content 2', width : 300, anchor : '50% 30%' }, { title : 'Item 3', html : 'Content 3', width : 500, anchor : '-500 50%' }] }); });
配置项anchor是一个包含两个值的字符串 :水平方向的锚定值和垂直方向的锚定值 (例如:'100% 50%')。 支持如下锚定值类型:
百分比 : 1到100之间的任何值,表示一个百分比。
第一个锚定值是组件在容器中所需占有的宽度百分比,第二个是高度百分比。例如:
// 指定两个值 anchor: '100% 50%' // 使用容器的全部宽度和1/2高度渲染组件 // 指定一个值 anchor: '100%'// 宽度值;高度默认为auto[/code]
偏移量 : 任何正数或负数值。
这是一个原始位置,第一个锚定位置是从右侧开始计算的偏移位置,第二个是从底部开始计算的偏移位置。例如:
// 指定两个值 anchor: '-50 -100' // 在容器整个宽度的-50像素处, // 整个高度的-100像素处渲染项目。 // one value specified anchor: '-50' // 锚定值被假定为到右侧的偏移量 // 到底部的偏移量将会默认为0[/code]
侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或
'b')。
对于拥有特效的对象, 容器必须有一个固定的尺寸,或者有一个在渲染时定义的anchorSize配置值 。
混合值 :
如果需要,锚定值也可以是混合型。 例如,如果需要以距离容器右侧边缘50像素,容器高度的75%渲染,使用:
另外一个参数是anchorSize。默认情况下,AnchorLayout将会根据容器自身的尺寸计算锚定位置。 但是,使用AnchorLayout的容器可以提供一个用来指定锚定位置的anchorSize配置项。 如果指定了anchorSize, 布局管理器将会把它用作一个虚拟的容器,根据它的尺寸来计算 锚定位置,如果必要,允许容器与调整锚定位置的逻辑无关。这个现象很难解释。尤其当使用anchor:'right '的时候,就更加无法理解它到底是怎么计算组件的宽度的。这仍然是一个问题!
相关文章推荐
- FineUI 的 Layout="Anchor" 布局 asp 的
- Ext3.2 布局——column layout
- UI布局引擎Layout 之 QGraphicsAnchorLayout
- Ext Js 3.2 锚点布局---AnchorLayout
- QML中基于锚的布局(Anchor-based Layout in QML)
- Android布局方式之表格布局管理器(TableLayout)
- Android RelativeLayout布局属性详解
- Android Studio自带模版:抽屉(DrawerLayout)布局
- Android studio约束布局 ConstraintLayout
- storyboard 和 xib混用出现的layout布局有问题
- 108.UIView关于布局和约束的方法(AutoLayout)
- Android编程布局控件之AbsoluteLayout用法实例分析
- 详解Android ConstraintLayout 约束布局的用法
- android布局详解之layout_weight
- 自定义RelativeLayout view实现布局。
- ExtJs4 笔记(14) layout 布局
- easyui学习笔记2:页面布局,layout插件
- Android入门教程二十二之AbsoluteLayout(绝对布局)的用法
- Android布局文件layout.xml的一些属性值
- iOS 使用Storyboard + AutoLayout布局,各种型号设备效果预览