学习ExtJS（七） Column布局

一、属性（构造参数）

baseCls:"x-plain"  Panel背景色颜色。

layout:"column" Panel进行列布局。

在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。

columnWidth表示使用百分比的形式指定列宽度。

width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

二、应用举例

 Ext.onReady(function(){
         new  Ext.Window({
                title: " 新增 " ,
                width: 500 ,
                height: 400 ,
                plain: true ,
                layout: " form " ,
                labelWidth: 55 ,
                items:[{
                   layout: " column " ,
                   baseCls: " x-plain " ,
                   style: " padding:5px " ,
                   items:[{
                      columnWidth:. 5 ,
                      layout: " form " ,
                      labelWidth: 50 ,
                      baseCls: " x-plain " ,
                   items:[{
                         xtype: " textfield " ,
                         fieldLabel: " 姓名 "
                      },{
                         xtype: " textfield " ,
                         fieldLabel: " 姓名 "
                      },{
                         xtype: " textfield " ,
                         fieldLabel: " 姓名 "
                      },{
                         xtype: " textfield " ,
                         fieldLabel: " 姓名 "
                      }]
                   },{
                     columnWidth:. 5 ,
                     layout: " form " ,
                     items:[{
                         id: " name " ,
                         xtype: " textfield " ,
                         fieldLabel: " 照片 " ,
                         inputType: " image " ,
                         width: 250 ,
                         height: 50
                     }]
                   }]
                
                },{
                  xtype: " textfield " ,
                  fieldLabel: "  证号 "
                }],
                showlock: false ,
                listeners:{
                   " show " :function(_window){
                   if  f( ! _window[ " showLock " ]){
                  Ext.getCmp( " name " ).getEl().dom.src  =   " default_pic.gif "  ;
                  _window.findByType( " textfield " )[ 4 ].getEl().dom.src  =   " default_pic.gif "  ;
                  //  alert(_window.findByType("textfield")[4].fieldLabel);
                   _window[ " showLock " ] = true ;
                   }
                  }   
                },
                buttons:[{text: " 确定 " },{text: " 取消 " }]
            }).show() ;
    }) ;

 Ext.onReady(function(){
        var _panel  =   new  Ext.Panel({
                title: " 人员信息 " ,
                renderTo:Ext.getBody(),
                frame: true ,
                width: 500 ,
                height: 300 ,
                layout: " column " ,
                items:[{title: " 列1 " ,width: 200 },
                {title: " 列2 " ,columnWidth:. 3 },
                {title: " 列3 " ,columnWidth:. 3 },
                {title: " 列4 " ,columnWidth:. 4 }
                ]
            }) 
    }) ;