Ext3.2 布局——column layout

columnlayout，这是一种可选的布局风格，用来在用一个多列的格式中创建结构化的布局 ，可以使用百分比（columnWidth）或者一个固定值(width)指定每一列的宽度，但是允许根据内容 改变高度。

ColumnLayout没有任何直接的配置项(除了继承获得的)， 但是它确实支持一个特殊的配置参数 columnWidth，在添加到其中的任意一个panel的配置中包含此参数。 布局管理器将会在进行布局操作时使用columnWidth(如果存在)或者每个panel的宽度 ，以决定如何调整每个panel的尺寸。 如果所给的panel没有指定width或者columnWidth，它的宽度将会 默认为panel的宽度(或者auto)，而panel的默认宽度是以其或者子元素在没有设置布局，没有设置width的情况下，title的文字宽度与其中的html代码的宽度的最大值为准（这只是我个人的理解，各位可以实际动手试一下）。

width属性总是被当作像素值， 并且必须是一个大于等于1的数值。 columnWidth属性总是被当作百分比，并且必须是一个大于0小于1的十进制值(例如.25)。

其次，即使制定了columnWidth，也要保证大概值应该大于title中文字的宽度。否则，title将会显示不正确。

其实我并不常用该布局，之所以写它是因为有一个同事总是滥用他，并导致我跟他一起犯了相同的错误。因此在此结合API总结如下。先看一下两段代码：

代码1

Ext.onReady(function() {
			Ext.QuickTips.init();
			var panel = new Ext.Panel({
				renderTo : 'da',
				bodyStyle : 'padding:15px',
				width : 1200,
				autoScroll : true,
				layout : 'column',
				items : [{
							title : 'Column 1',
							columnWidth : .25
						}, {
							title : 'Column 2',
							columnWidth : .6
						}, {
							title : 'Column 3',
							columnWidth : .15
						}]

				});
		});

代码2

Ext.onReady(function() {
			Ext.QuickTips.init();
			var panel = new Ext.Panel({
						renderTo : 'da',
						bodyStyle : 'padding:15px',
						width : 1200,
						autoScroll : true,
						layout : 'column',
						items : [{
									title : 'Column 1',
									width : 120
								}, {
									title : 'Column 2',
									columnWidth : .8
								}, {
									title : 'Column 3',
									columnWidth : .2
								}]

					});
		});

代码1和代码2的区别在于Column 1的宽度设置。一个是columnWidth，一个是width。API上是这样解释的：

布局逻辑对所包含的panel集合进行两轮遍历。 第一轮布局期间，拥有固定宽度或者没有指定宽度(或者是auto)的所有panel都被跳过， 但是它们的宽度会被从外部容器的宽度中减去（固定宽度减去其值）。 在第二轮布局期间，根据在容器剩余宽度中所占的百分比， 拥有columnWidth属性的所有panel将会被分配宽度像素值。 换句话说，百分比宽度的panel是被设计用来填充剩余宽度的， 此宽度是被固定宽度和自动宽度panel们所剩余下来的。 因为如此，你可以指定任意个拥有不同百分比的列数， columnWidth之和必须为1(或者100%)，否则你的布局管理器可能不会像所期望的那样进行布局。如果有兴趣可以看看以下的代码。

代码3

Ext.onReady(function() {
			Ext.QuickTips.init();
			var shortBogusMarkup = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.';
			var panel = new Ext.Panel({
						renderTo : 'da',
						bodyStyle : 'padding:15px',
						width : 1200,
						autoScroll : true,
						layout : 'column',
						items : [{
									title : 'Column 1',
									width : 120
								}, {
									title : 'Column 2',
									columnWidth : .8
								}, {
									title : 'Column 3',
									columnWidth : .2
								}, {
									title : 'Column 4-----------------',
									xtype : 'panel',
									layout : 'border',
									height : 500,
									items : [{
												title : 'A Panel',
												region : 'center',
												autoScroll : true,
												html : shortBogusMarkup
											}]
								}]

					});
		});

与代码2比较，我添加了一个column4。这时候就有一个好玩的现象了。首先，如果column 4没有items，并且也没有设置layout。那么column 4的宽度将会以title中的文字宽度为准，前提是文字宽度不会超过总宽度减去设置的width宽度，如果超过了，colum 4将会另起一行。如果column 4的title中文字正常，但是其中的items宽度超过了title的文字宽度，那么布局将会乱。如下代码（没有设置layout，也没有设置width）：

                                                                 {
									title : 'Column 4-----------------',
									xtype : 'panel',
//									layout : 'border',
									height : 500,
									items : [{
												title : 'A Panel',
												autoScroll : true,
												html : shortBogusMarkup
											}]
								}

各位可以实际动手比较一下他们的区别。个人建议，尽量不要用columnlayout，其中隐藏的陷阱比较多。