学习ExtJS Column布局

作者: 浪9了就喜欢海
来源: 51数据库
2021-07-08

一、属性（构造参数）
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} 
] 
}) 
}) ; 