Ext Js 列布局-- ColumnLayout

来源：互联网发布：有什么变声软件编辑：程序博客网时间：2024/05/14 11:11

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>

程序效果：

通过设置子面板的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>

程序效果图：

第三： 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>

程序效果：

设置panel的宽度为500，

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

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

第三列宽度=（500-150）* 0.6（说明：按比例分割剩余宽度）