近来很多网站都在转载我Blog的文章,而且很多都不署名,对此深表遗憾,希望转载文章的网站能尊重一下作者的劳动,在转载时联系一下作者并将作者名字和转载出去署上。
废话不多说了,这次给大家节选的是ColumnLayout一节,希望能大家对ColumnLayout有新的认识。
CoulumnLayout是经常用到的布局类型,但也是让人感到迷惑的布局。主要原因是同一效果的定义方法有多种。笔者在早期的一篇博文虽然也做过讲解,但是因为例子写的是简洁的写法,反而没把问题说清楚,实在深感抱歉。
总体上说要达到同一效果,CoulumnLayout的定义方法有以下4种:
■ 一行定义一个CoulumnLayout,每列中只有一个控件
■ 只定义一个CoulumnLayout,每列中只有一个控件
■ 只定义一个CoulumnLayout,每列中有多个控件
■ 一行一个CoulumnLayout,每列中有多个控件
下面通过例子详细说明一下这4种方法以及它们的优缺点。这4种方法要实现的界面如图1。
图1
界面中定义了3行3列,其中第2行第3列没有控件,第三行则是需要紧凑结构,与前面两行不对等的3列。虽然是非常简单的一个界面,但是第2、4种定义方法如果不注意就会出现图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:'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} ]}, |