美文网首页
锚点布局

锚点布局

作者: 蓝心天 | 来源:发表于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"}  
    ]  
    

    });

    相关文章

      网友评论

          本文标题:锚点布局

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