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