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）

代码：

 

<%@ 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>

 

程序效果图：