Ext Js 3.2 锚点布局---AnchorLayout

来源：互联网发布：淘宝售后差评回复编辑：程序博客网时间：2024/05/29 02:08

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>

程序效果图：