学习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 }
                ]
            }) 
    }) ;

你可能感兴趣的:(column)