Ext3.2 布局——anchor layout
来源:互联网 发布:如何建立网络连接 编辑:程序博客网 时间:2024/04/30 13:15
anchor layout 是一个有点意思的布局。简单的来说,在使用anchor布局的容器中,它的子组件都有一个anchor配置项,这个配置项表示该组件相对于父组件的位置。
上图是一个使用了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
- 偏移量 : 任何正数或负数值。这是一个原始位置,第一个锚定位置是从右侧开始计算的偏移位置,第二个是从底部开始计算的偏移位置。例如:
// 指定两个值anchor: '-50 -100' // 在容器整个宽度的-50像素处, // 整个高度的-100像素处渲染项目。// one value specifiedanchor: '-50' // 锚定值被假定为到右侧的偏移量 // 到底部的偏移量将会默认为0
- 侧边值 : 可用的值是 'right' (或 'r') 和 'bottom' (或'b')。对于拥有特效的对象, 容器必须有一个固定的尺寸,或者有一个在渲染时定义的anchorSize配置值 。
- 混合值 :如果需要,锚定值也可以是混合型。 例如,如果需要以距离容器右侧边缘50像素,容器高度的75%渲染,使用:
另外一个参数是anchorSize。默认情况下,AnchorLayout将会根据容器自身的尺寸计算锚定位置。 但是,使用AnchorLayout的容器可以提供一个用来指定锚定位置的anchorSize配置项。 如果指定了anchorSize, 布局管理器将会把它用作一个虚拟的容器,根据它的尺寸来计算 锚定位置,如果必要,允许容器与调整锚定位置的逻辑无关。这个现象很难解释。尤其当使用anchor:'right '的时候,就更加无法理解它到底是怎么计算组件的宽度的。这仍然是一个问题!
0 0
- Ext3.2 布局——anchor layout
- Ext3.2 布局——border layout
- Ext3.2 布局——form layout
- Ext3.2 布局——column layout
- Ext3.2 布局——table layout
- Ext3.2 布局——vbox layout
- Ext3.2 布局——hbox layout
- Extjs4布局详解(五)—anchor布局
- Extjs4布局详解(五)——anchor布局
- Ext3.2 布局——一个完整的form 表单
- FineUI 的 Layout="Anchor" 布局 asp 的
- uikit——Auto Layout——UIView——anchor
- QML中基于锚的布局(Anchor-based Layout in QML)
- EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox)
- Extjs4----anchor布局
- Extjs4----anchor布局
- Extjs4----anchor布局
- ext3.2 form 布局 之radio
- 转:久邦数码张向东:GO桌面如何做到3亿全球用户
- COCOS2DX3.0的3种触摸响应机制
- Linux下string和wstring的转换
- 永记今日
- Edit Distance
- Ext3.2 布局——anchor layout
- Mac OS X:sudo 命令需要非空的管理员密码
- linux安装网卡驱动
- c++11
- php配置yii框架
- Linux下查看主机支持的内存
- Ural1017(DP)
- 微信公众平台的通讯过程
- 印度央行担心比特币信誉,但是没有叫停它(来自于http://techcrunch.com/)