欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

学习ExtJS Column布局

程序员文章站 2022-06-17 16:17:08
一、属性(构造参数) basecls:"x-plain" panel背景色颜色。 layout:"column" panel进行列布局。 在子元素中指定使用columnwi...
一、属性(构造参数)
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}
]
})
}) ;