Learn ExtJS Column layout_extjs

1. Attributes (construction parameters)
baseCls: "x-plain" Panel background color.
layout:"column" Panel performs column layout.
Specify columnWidth or width in the child element to specify the column width occupied by the child element.
columnWidth means specifying the column width in percentage form.
width uses absolute pixels to specify the column width. In actual applications, a mixture of the two methods can be used.
2. Application examples

Copy code The code is as follows:

Ext.onReady(function (){
new Ext.Window({
title:"New",
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:"Name"
},{
xtype:"textfield",
fieldLabel:"Name"
},{
xtype:"textfield" ,
fieldLabel:"Name"
},{
xtype:"textfield",
fieldLabel:"Name"
}]
},{
columnWidth:.5 ,
layout:"form",
items:[{
id:"name",
xtype:"textfield",
fieldLabel:"photo",
inputType:" image",
width:250,
height:50
}]
}]
},{
xtype:"textfield",
fieldLabel:"Certificate Number"
}],
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:"OK"},{text:"Cancel"}]
}).show() ;
}) ;

Copy code The code is as follows:

Ext.onReady(function(){
var _panel = new Ext.Panel({
title:"Personnel information",
renderTo:Ext.getBody(),
frame:true,
width:500,
height:300,
layout:"column" ,
items:[{title:"Column 1",width:200},
{title:"Column 2",columnWidth:.3},
{title:"Column 3",columnWidth: .3},
{title:"Column 4",columnWidth:.4}
]
})
});