锚点布局

锚点布局

锚点布局是根据容器大小为其所包含的子面板进行定位的布局,其xtype值为anchor。

主要配置项:

 anchorSize:父容器提供
 anchor:子容器提供

加入到使用anchor布局面板中的子面板都支持一个anchor配置项,它是一个包含两个值的字符串,水平值和垂直值。其有效值:
(1) 百分比: 100% 50%
第1项数值:表示子面板占父容器宽度的百分比
第2项数值:表示子面板占父容器高度的百分比
如果只提供一个值则只对子面板的宽度生效,高度保持默认值。
(2) 偏移量: -50 -100
第1项数值:表示子面板到父容器右边缘的偏移量
第2项数值:表示子面板到父容器下边缘的偏移量
如果只提供一个值则只对子面板的宽度生效,高度保持默认值。
(3)参考边: r b
要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果。

代码如下:

 new Ext.Panel({  
renderTo: "div2",  
frame: true,  
layout: "anchor",  
title: "锚点布局(AnchorLayout)",  
height: 300,  
width: 500,  
autoScroll: true,  
defaults: {  
    bodyStyle: "padding:3px; background-color: #FFFFFF" 
},  
items: [  
    {anchor: "50% 30%", title:"嵌套面板1", html:"嵌套面板1"},  
    {anchor: "-50 -150", title:"嵌套面板2", html:"嵌套面板2"},  
    {anchor: "r b", width: 300, height:100, title:"嵌套面板3", html:"嵌套面板3"}  
]  

});

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,285评论 1 92
  • 锚点布局 有两个关键点: -Anchor的取值:Anchor可以由两个值组成,中间以空格分隔;也可以由一个值组成,...
    爱星_b9f1阅读 1,012评论 0 0
  • 转载:http://www.cocoachina.com/swift/20161201/18198.html 前言...
    F麦子阅读 4,531评论 2 8
  • 前言 TangramKit是iOS系统下用Swift编写的第三方界面布局框架。他集成了iOS的AutoLayout...
    欧阳大哥2013阅读 9,705评论 12 74
  • 朋友问我:“你和一个你爱的人分手后你是立刻断掉他她的一切联系方式还是继续保持联系”。我的答案是,短掉一切联系方式,...
    大梳阅读 372评论 0 0

友情链接更多精彩内容