您的位置：首页 > Web前端 > extjs > 正文

extjs anchor 锚点布局

更多时间：2013-9-28 类别：Web前端浏览量：1709

extjs anchor 锚点布局

extjs anchor 锚点布局

Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局，其xtype值为anchor。

主要配置项：

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

加入到使用anchor布局面板中的子面板都支持一个anchor配置项，它是一个包含两个值的字符串，水平值和垂直值。其有效值：

百分比： 100% 50%

第1项数值：表示子面板占父容器宽度的百分比
第2项数值：表示子面板占父容器高度的百分比
如果只提供一个值则只对子面板的宽度生效，高度保持默认值。

偏移量： -50 -100

第1项数值：表示子面板到父容器右边缘的偏移量
第2项数值：表示子面板到父容器下边缘的偏移量
如果只提供一个值则只对子面板的宽度生效，高度保持默认值。

anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%

实例

JScript 代码复制


new Ext.Panel(...{    
    renderTo: "li2",    
    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"}    
    ]    
});

其效果图为：

Extjs 锚点布局（AnchorLayout） - 兵败如山倒 - JAVA EE

标签：extjs anchor 布局

上一篇：extjs card卡片式布局

下一篇：面试时紧张该怎么办

您可能感兴趣

extjs anchor 锚点布局

extjs anchor 锚点布局

热门推荐

排行榜