ColumnLayout的使用方法

（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: [

                                             {xtype:'textfield',fieldLabel:'一行一列',name:'text1-1-1',anchor:'90%'}

                                               ]},

 这样不是要写多很多代码？确实够笨的。不过笔者认为笨不要紧，关键是能解决大问题。每行定义一个CoulumnLayout， 行与行之间相互独立起来，就不会互相影响了，尤其是定义第三行这样需要紧凑结构，不规则的行尤其适合。这样还有一个好处就是可以减少计算columnWidth的时间与配置tabIndex的问题。尤其是在已经有很多控件，要在中间中插入一个新的控件时，你会觉得还是该方法挺实用的