ExtJS 열 알아보기

1. 속성(구성 매개변수)
baseCls: "x-plain" 패널 배경색.
layout:"column" 패널은 열 레이아웃을 수행합니다.
하위 요소가 차지하는 열 너비를 지정하려면 하위 요소에 columnWidth 또는 너비를 지정하세요.
columnWidth는 열 너비를 백분율 형식으로 지정하는 것을 의미합니다.
width는 절대 픽셀을 사용하여 열 너비를 지정합니다. 실제 애플리케이션에서는 두 가지 방법을 혼합하여 사용할 수 있습니다.
2. 적용 예시

코드 복사 코드는 다음과 같습니다.

Ext. onReady(function (){
new Ext.Window({
title:"New",
width:500,
height:400,
plain:true,
layout: "form",
labelWidth:55,
항목:[{
layout:"column",
baseCls:"x-plain",
style:"padding:5px",
항목:[{
columnWidth:.5,
레이아웃:"form",
labelWidth:50,
baseCls:"x-plain",
항목:[{
xtype:"textfield",
fieldLabel:"이름"
},{
xtype:"textfield",
fieldLabel:"이름"
},{
xtype:" textfield" ,
fieldLabel:"이름"
},{
xtype:"textfield",
fieldLabel:"이름"
}]
},{
열 너비: .5 ,
레이아웃:"양식",
항목:[{
id:"name",
xtype:"textfield",
fieldLabel:"photo",
inputType :" image",
너비:250,
높이:50
}]
}]
},{
xtype:"textfield",
fieldLabel:"인증서 Number"
}],
showlock:false,
청취자:{
"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;
}
}
},
버튼:[{text:"확인"},{text:"취소"}]
}).show()
})

코드 복사 코드는 다음과 같습니다.

Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"개인 정보",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
레이아웃:"열",
항목:[{제목:"열 1",너비:200},
{제목:"열 2",columnWidth:.3},
{제목:"열 3",columnWidth: .3},
{title:"Column 4",columnWidth:.4}
]
})
});