学习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}

                ]

            }) 

    }) ;