无废话ExtJs 系列教程十四-----(二) [列布局:ColumnLayout ]

1:Ext.layout.ColumnLayout

    它是为构建某个垂直式结构而准备的布局,当中包含已指定宽度的多个列,可以使用columnWidth或者width来指定子元素所占的列宽度

    属性width总是以像素来固定宽度,并必须是数字大于或者等于1,属性columnWidth是百分比相对单位,并必须是百分比字符串区间是大于0小于1

    使用columnWidth属性来分配列时,columnWidth加起来必须是等于1(或110%),否则渲染出来的布局可能会出现不正常。 

 

2:指定列宽度的三种方式

 第一:通过width属性来指定列宽度

 

<%@ 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>使用width属性指定列宽度</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() {
			 new Ext.Panel({
				  renderTo: 'column',
				  width: 500,
				  height: 150,
				  title: 'Columnayout',
				  layout: 'column',    //指定布局方式为column
				  defaults: {
				       bodyStyle: 'background-color: #FFFFFF',  //设置面板的背景色
				       frame: true
				  },
				  frame: true,
				  items: [
					  {title: 'first', html: '第一列', width: 200, height: 100},
					  {title: 'second', html: '第二列', width: 200, height: 100},
				  ]
  });
		});
	</script>
  </head>
  <body>
    <div id="column"></div>
  </body>
</html>

 

程序效果:


无废话ExtJs 系列教程十四-----(二) [列布局:ColumnLayout ]
 

通过设置子面板的width属性,来设定固定的列宽度分别为200、200以及剩余的宽度。

 

第二:columnWidth属性指定列宽度

 代码:

 

<%@ 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>columnWidth属性指定列宽度</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() {
			 new Ext.Panel({
				  renderTo: 'column',
				  width: 500,
				  height: 150,
				  title: 'Columnayout',
				  layout: 'column',    //指定布局方式为column
				  frame: true,
				  defaults: {
				       bodyStyle: 'background-color: #FFFFFF',  //设置面板的背景色
				       frame: true
				  },
				  items: [  //通过columnWidth属性来指定宽占容器的百分比
					  {title: 'first', html: '第一列', columnWidth: 0.4, height: 100},
					  {title: 'second', html: '第二列', columnWidth: 0.6, height: 100},
				  ]
  });
		});
	</script>
  </head>
  <body>
    <div id="column"></div>
  </body>
</html>

 

程序效果图:


无废话ExtJs 系列教程十四-----(二) [列布局:ColumnLayout ]
 

 

第三: width和columnWidth属性指定列宽度

 

<%@ 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>columnWidth属性指定列宽度</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() {
			 new Ext.Panel({
				  renderTo: 'column',
				  width: 500,
				  height: 150,
				  title: 'Columnayout',
				  layout: 'column',    //指定布局方式为column
				  frame: true,
				  defaults: {
				       bodyStyle: 'background-color: #FFFFFF',  //设置面板的背景色
				       frame: true,
				       height: 100
				  },
				  items: [  
					  {title: 'first', html: '第一列', width: 150},    // 指定列宽度为150像素  
					  {title: 'second', html: '第二列', columnWidth: 0.4},   //指定列宽度为剩下宽度的40%
					  {title: 'third', html: '第三列', columnWidth: 0.6}     //指定列宽度为剩下宽度的60%
				  ]
             });
		});
	</script>
  </head>
  <body>
    <div id="column"></div>
  </body>
</html>

 

程序效果:


无废话ExtJs 系列教程十四-----(二) [列布局:ColumnLayout ]
 

 

设置panel的宽度为500,

 第一列宽度=150(因为第一列是通过width配置项指定的固定值)

 第二列宽度=(500-150)* 0.4 (按比例分割剩余宽度)

 第三列宽度=(500-150)* 0.6(说明:按比例分割剩余宽度)

你可能感兴趣的:(layout)