美文网首页
锚点布局

锚点布局

作者: 蓝心天 | 来源:发表于2018-11-25 19:06 被阅读0次

锚点布局

锚点布局是根据容器大小为其所包含的子面板进行定位的布局,其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"}  
]  

});

相关文章

  • 锚点布局

    锚点布局 有两个关键点: -Anchor的取值:Anchor可以由两个值组成,中间以空格分隔;也可以由一个值组成,...

  • 锚点布局

    锚点布局 锚点布局是根据容器大小为其所包含的子面板进行定位的布局,其xtype值为anchor。 主要配置项: 加...

  • Lesson13 AnchorPane布局类

    AnchorPane //锚点布局,也称为 绝对布局,定位布局AnchorPane 可以管理该布局类上的所有孩子...

  • UGUI锚点(Anchors),轴点(Pivot)及RectTr

    锚点Anchors UGUI为屏幕自适应提供了锚点机制,方便在不同分辨率下的UI元素保持相同的布局格式,本篇将锚点...

  • 小白学qml 4

    布局元素( Layout Items) QML使⽤anchors( 锚) 对元素进⾏布局。 anchoring( ...

  • iOS 高级核心动画 day02 - 布局、锚点

    一、布局和锚点 1. UIView 有三个布局属性分别是啥?CALayer 有三个重要的布局属性分别是啥? UIV...

  • 钟表实现原理

    设置锚点前 设置锚点后

  • 一、起步(1.8布局)

    1.8布局 布局是通过特定的方式来容纳排列部件的容器。 锚状布局AnchorLayout 部件能被定位到顶部、...

  • UGUI RectTranstrom锚点详解和坐标系

    锚点相对关系 锚点是我们用来确定UI元素的位置的,当然这个锚点是相对离自己最近的父类而言的,子类的锚点和父类的锚点...

  • 简单聊聊锚点与map标签的热点锚点

    本文聊的是锚点和热点区域的锚点 想要更详细的了解锚点可以学习 张鑫旭的技术之锚点传送门 其实锚点还算简单,是学习的...

网友评论

      本文标题:锚点布局

      本文链接:https://www.haomeiwen.com/subject/hjfhqqtx.html