1:Ext.layout.AnchorLayout
它是根据容器大小为其所包含的子面板进行定位的布局,对应面板布局(layout)配置项的名称为anchor,如果容器大小发生变化时,所有子面板的位置都会根据规则进行重新计算,并自动渲染,它的主要配置项如下:
(1):anchorSize(父容器提供)
anchor布局用anchorSize配置项用来设置虚拟容器的大小,默认情况下anchor布局是根据容器自身大小来进行定位的,如果提供了anchorSize属性,则anchor布局就会根据
该尺寸生成一个虚拟容器,然后根据这个虚拟容器的大小来进行计算定位。
(2):anchor(子容器提供)
anchor布局面板中的子面板都支持anchor配置项,它是包含2个值的字符串:水平值和水平值,例如"50%, 50%"这个值告知父容器应该怎样对加入到其中的子面板进行定位,有效值包括以下3类。
- Percentage(百分比):1到100的任意百分比,例如,"100% 50%"表示生成完整的宽度和一半高度的子项,若只提供一个值,则只对子面板的宽度生效,高度保持默认值。
- Offsets(偏移值):任意整数值,可以为整数或者负数,第一个值表示子面板到父容器右边缘的偏移值,第二个值表示子面板到父容器下边缘的偏移值,例如,"-50, -100"
表示生成的容器在宽度和高度分别减去50像素和100像素,若只提供一个值,则只对子面板的宽度生效,高度保持默认值。
- Sides:有效值是"right"(或r)和"bottom"(或b)
1. 代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>AnchorLayout</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ renderTo: 'anchorLayout', title: '锚点布局', width: 500, height: 300, layout: 'anchor', frame: true, autoScroll: true, //设置滚动条 defaults: { bodyStyle: 'background-color: #FFFFFF; padding: 3px' }, items: [{ anchor: '30% 30%', //设置子面板的宽度分别为父面板的30%和30% title: 'panel1', html: '百分比(Percentage定位)', frame: true }, { anchor: '-30 -100', //设置子面板的宽度偏移父面板分别为30,100像素 title: 'panel2', html: '偏移量(Offsets)定位', frame: true }, { anchor: 'r b', //相对于父容器的右边和底边的差值进行定位 title: 'panel3', html: '参考边(sides)定位', frame: true }] }); }); </script> </head> <body> <div id="anchorLayout"></div> </body> </html>
2. 效果如下: