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