`
huiqinbo
  • 浏览: 334995 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

无废话ExtJs 系列教程十四-----(一) [锚点布局：AnchorLayout ]

 
阅读更多

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. 效果如下：



 

  • 大小: 11.8 KB
分享到：
| 10 个免费的服务器监控工具
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics