《Ext详解与实践》节选：ColumnLayout的使用方法

一直忙于筹备《Ext实战》一书，所以BLog很久没更新了，实在抱歉！现在书写得差不多了，把已经完成的节选一部分放上来，希望对大家有说帮助。
近来很多网站都在转载我Blog的文章，而且很多都不署名，对此深表遗憾，希望转载文章的网站能尊重一下作者的劳动，在转载时联系一下作者并将作者名字和转载出去署上。
废话不多说了，这次给大家节选的是ColumnLayout一节，希望能大家对ColumnLayout有新的认识。

<style> st1\:*{behavior:url(#ieooui) } </style> <style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; line-height:150%; mso-pagination:none; font-size:10.0pt; mso-bidi-font-size:12.0pt; font-family:"Times New Roman"; mso-fareast-font-family:宋体; mso-font-kerning:1.0pt;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:842167345; mso-list-type:hybrid; mso-list-template-ids:-1837972440 -1997392486 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;} @list l0:level1 {mso-level-number-format:bullet; mso-level-text:■; mso-level-tab-stop:41.25pt; mso-level-number-position:left; margin-left:41.25pt; text-indent:-21.0pt; font-family:宋体;} @list l1 {mso-list-id:1534264948; mso-list-type:hybrid; mso-list-template-ids:882679276 881917756 67698713 67698715 67698703 67698713 67698715 67698703 67698713 67698715;} @list l1:level1 {mso-level-text:（%1）; mso-level-tab-stop:56.25pt; mso-level-number-position:left; margin-left:56.25pt; text-indent:-36.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style>

CoulumnLayout是经常用到的布局类型，但也是让人感到迷惑的布局。主要原因是同一效果的定义方法有多种。笔者在早期的一篇博文虽然也做过讲解，但是因为例子写的是简洁的写法，反而没把问题说清楚，实在深感抱歉。

总体上说要达到同一效果，CoulumnLayout的定义方法有以下4种：

■一行定义一个CoulumnLayout，每列中只有一个控件

■只定义一个CoulumnLayout，每列中只有一个控件

■只定义一个CoulumnLayout，每列中有多个控件

■一行一个CoulumnLayout，每列中有多个控件

下面通过例子详细说明一下这4种方法以及它们的优缺点。这4种方法要实现的界面如图1。

图1

界面中定义了3行3列，其中第2行第3列没有控件，第三行则是需要紧凑结构，与前面两行不对等的3列。虽然是非常简单的一个界面，但是第2、4种定义方法如果不注意就会出现图2中的情况。

图2

（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:'text<chsdate w:st="on" year="2001" month="1" day="1" islunardate="False" isrocdate="False">1-1-1</chsdate>',anchor:'90%'} ]}, //第二列 {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'一行二列',name:'text<chsdate w:st="on" year="2001" month="1" day="2" islunardate="False" isrocdate="False">1-1-2</chsdate>',anchor:'90%'} ]}, //第三列 {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'一行三列',name:'text<chsdate w:st="on" year="2001" month="1" day="3" islunardate="False" isrocdate="False">1-1-3</chsdate>',anchor:'90%'} ]} ]}, //第二行 {layout:'column',border:false,items:[ //第一列 {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'二行一列',name:'text<chsdate w:st="on" year="2001" month="2" day="1" islunardate="False" isrocdate="False">1-2-1</chsdate>',anchor:'90%'} ]}, //第二列 {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'二行二列',name:'text<chsdate w:st="on" year="2001" month="2" day="2" islunardate="False" isrocdate="False">1-2-2</chsdate>',anchor:'90%'} ]} ]}, //第三行 {layout:'column',border:false,items:[ //第一列 {columnWidth:.25,layout: 'form',border:false,items: [ {xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text<chsdate w:st="on" year="2001" month="3" day="1" islunardate="False" isrocdate="False">1-3-1</chsdate>',anchor:'90%'} ]}, //第二列 {columnWidth:.15,layout: 'form',border:false,items: [ {xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text<chsdate w:st="on" year="2001" month="3" day="2" islunardate="False" isrocdate="False">1-3-2</chsdate>',anchor:'90%'} ]}, //第三列 {columnWidth:.15,layout: 'form',border:false,items: [ {xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text<chsdate w:st="on" year="2001" month="3" day="3" islunardate="False" isrocdate="False">1-3-3</chsdate>',anchor:'90%'} ]} ]} ] });

看出该方法如何笨了吧？就是每定义一行就要重新定义一个CoulumnLayout：

{columnWidth:.3,layout: 'form',border:false,items: [[ /* 子组件 */]}

而且每行中的每列只定义一个控件：

//第一列 {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'一行一列',name:'text<chsdate w:st="on" year="2001" month="1" day="1" islunardate="False" isrocdate="False">1-1-1</chsdate>',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:'text<chsdate w:st="on" year="2002" month="1" day="1" islunardate="False" isrocdate="False">2-1-1</chsdate>',anchor:'90%'} ]}, {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'一行二列',name:'text<chsdate w:st="on" year="2002" month="1" day="2" islunardate="False" isrocdate="False">2-1-2</chsdate>',anchor:'90%'} ]}, {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'一行三列',name:'text<chsdate w:st="on" year="2002" month="1" day="3" islunardate="False" isrocdate="False">2-1-3</chsdate>',anchor:'90%'} ]}, {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'二行一列',name:'text<chsdate w:st="on" year="2002" month="2" day="1" islunardate="False" isrocdate="False">2-2-1</chsdate>',anchor:'90%'} ]}, {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'textfield',fieldLabel:'二行二列',name:'text<chsdate w:st="on" year="2002" month="2" day="2" islunardate="False" isrocdate="False">2-2-2</chsdate>',anchor:'90%'} ]}, {columnWidth:.3,layout: 'form',border:false,items: [ {xtype:'panel',html:'&nbsp;',height:26} ]}, {columnWidth:.25,layout: 'form',border:false,items: [ {xtype:'checkbox',fieldLabel:'三行一列',boxLabel:'三行一列',name:'text<chsdate w:st="on" year="2002" month="3" day="1" islunardate="False" isrocdate="False">2-3-1</chsdate>',anchor:'90%'} ]}, {columnWidth:.15,layout: 'form',border:false,items: [ {xtype:'checkbox',hideLabel:true,boxLabel:'三行二列',name:'text<chsdate w:st="on" year="2002" month="3" day="2" islunardate="False" isrocdate="False">2-3-2</chsdate>',anchor:'90%'} ]}, {columnWidth:.15,layout: 'form',border:false,items: [ {xtype:'checkbox',hideLabel:true,boxLabel:'三行三列',name:'text<chsdate w:st="on" year="2002" month="3" day="3" islunardate="False" isrocdate="False">2-3-3</chsdate>',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作为控件。为什么要这样呢？做个测试，把“&nbsp；”和高度先去掉，看看效果，问题依然如故。奇怪吧？这还是和CSS有关，一个空的DIV不占任何宽度和高度，所以在实际的HTML源代码中根本没把增加的columnWidth算进去。居然这样，就加回“&nbsp；”看看。奇怪了，图3的结果怎么还是错误的？不过和图2有些不同了，第3行第1列的位置偏下了。其实又是CSS作怪，高度不足引起的，再加入“height:<chmetcnv style="background-position: left bottom; background-image: url(res://ietag.dll/#34/#1001); background-repeat: repeat-x;" tabindex="0" w:st="on" unitname="”" sourcevalue="26" hasspace="False" negative="False" numbertype="1" tcsc="0">26<span style="font-family: 宋体;" lang="EN-US"><span lang="EN-US">”</span></span></chmetcnv>就一切正常了。