ColumnLayout的使用方法
CoulumnLayout是经常用到的布局类型，但也是让人感到迷惑的布局。主要原因是同一效果的定义方法有多种。笔者在早期的一篇博文虽然也做过讲解，但是因为例子写的是简洁的写法，反而没把问题说清楚，实在深感抱歉。
总体上说要达到同一效果，CoulumnLayout的定义方法有以下4种：
■ 一行定义一个CoulumnLayout，每列中只有一个控件
■ 只定义一个CoulumnLayout，每列中只有一个控件
■ 只定义一个CoulumnLayout，每列中有多个控件
■ 一行一个CoulumnLayout，每列中有多个控件
下面通过例子详细说明一下这4种方法以及它们的优缺点。
（1） 一行定义一个CoulumnLayout，每列中只有一个控件的定义方法
该方法是最笨的方法，但是却是最实用的方法，也是笔者强烈推荐的方法。
为什么说该方法笨呢？请先看以下源代码：
Ext.onReady(function(){
var frm = new Ext.form.FormPanel({
applyTo: "form1",
autoHeight: true,
width: 750,
frame: true,
labelWidth:80,
labelSeparator:"：",
title:'一行定义一个CoulumnLayout，每列中只有一个控件',
items:[
//第一行
{layout:'column',border:false,items:[
//第一列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行一列',name:'text1-1-1',anchor:'90%'}
]},
//第二列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行二列',name:'text1-1-2',anchor:'90%'}
]},
//第三列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行三列',name:'text1-1-3',anchor:'90%'}
]}
]},
//第二行
{layout:'column',border:false,items:[
//第一列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'二行一列',name:'text1-2-1',anchor:'90%'}
]},
//第二列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'二行二列',name:'text1-2-2',anchor:'90%'}
]}
]},
//第三行
{layout:'column',border:false,items:[
//第一列
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text1-3-1',anchor:'90%'}
]},
//第二列
{columnWidth:.15,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text1-3-2',anchor:'90%'}
]},
//第三列
{columnWidth:.15,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text1-3-3',anchor:'90%'}
]}
]}
]
});
看出该方法如何笨了吧？就是每定义一行就要重新定义一个CoulumnLayout：
{columnWidth:.3,layout: 'form',border:false,items: [[ /* 子组件 */]}
而且每行中的每列只定义一个控件：
//第一列
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行一列',name:'text1-1-1',anchor:'90%'}
]},
这样不是要写多很多代码？确实够笨的。不过笔者认为笨不要紧，关键是能解决大问题。每行定义一个CoulumnLayout， 行与行之间相互独立起来，就不会互相影响了，尤其是定义第三行这样需要紧凑结构，不规则的行尤其适合。这样还有一个好处就是可以减少计算columnWidth的时间与配置tabIndex的问题。尤其是在已经有很多控件，要在中间中插入一个新的控件时，你会觉得还是该方法挺实用的。为什么会这样？请继续往下看其它方法。
（2） 只定义一个CoulumnLayout，每列中只有一个控件的方法
该方法顾名思义，就是不管三七二十一，就只定义一个CoulumnLayout，分行的问题由列自己解决。
列是如何自动分行的？是通过属性columnWidth来实现的。分行的原则就是从第一列的columnWidth开始计算，每当n（n>=1）列的columnWidth的和超过1的时候就会自动换行，然后从第n列重新开始计算，依此类推直到最后一列。
明白这个原则后，咱们来看看该方法的源代码：
var frm2 = new Ext.form.FormPanel({
applyTo: "form2",
autoHeight: true,
width: 750,
frame: true,
labelWidth:80,
labelSeparator:"：",
title:'只定义一个CoulumnLayout，每列中只有一个控件',
items:[
{layout:'column',border:false,items:[
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行一列',name:'text2-1-1',anchor:'90%'}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行二列',name:'text2-1-2',anchor:'90%'}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'一行三列',name:'text2-1-3',anchor:'90%'}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'二行一列',name:'text2-2-1',anchor:'90%'}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'textfield',fieldLabel:'二行二列',name:'text2-2-2',anchor:'90%'}
]},
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'panel',html:' ',height:26}
]},
{columnWidth:.25,layout: 'form',border:false,items: [
{xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text2-3-1',anchor:'90%'}
]},
{columnWidth:.15,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text2-3-2',anchor:'90%'}
]},
{columnWidth:.15,layout: 'form',border:false,items: [
{xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text2-3-3',anchor:'90%'}
]}
]}
]
});
代码中只定义了一个CoulumnLayout，然后全是列定义。前面3个列的columnWidth都是0.3，再加上第4列的columnWidth就是1.2了，已经超过1了，因而从第4列开始是第2行了。第2行只有2个列，columnWidth的总和才0.6，再加上第3行的第1列的columnWidth才是0.85，还不到1，所以会出现图3的错误。解决办法就是增加一个空列来补足宽度：
{columnWidth:.3,layout: 'form',border:false,items: [
{xtype:'panel',html:' ',height:26}
]},
注意到没有，在列中使用了一个高度为26，内容为一个空白字符的panel作为控件。为什么要这样呢？做个测试，把" ；"和高度先去掉，看看效果，问题依然如故。奇怪吧？这还是和CSS有关，一个空的DIV不占任何宽度和高度，所以在实际的HTML源代码中根本没把增加的columnWidth算进去。居然这样，就加回" ；"看看。奇怪了，图3的结果怎么还是错误的？不过和图2有些不同了，第3行第1列的位置偏下了。其实又是CSS作怪，高度不足引起的，再加入"height:26"就一切正常了。