ExtJS 列を学ぶlayout_extjs

1. 属性 (構築パラメーター)
baseCls: "x-plain" パネルの背景色。
layout:"column" パネルは列レイアウトを実行します。
子要素が占める列の幅を指定するには、子要素で columnWidth または width を指定します。
columnWidth は、列の幅をパーセント形式で指定することを意味します。
width は絶対ピクセルを使用して列の幅を指定します。実際のアプリケーションでは、2 つの方法を組み合わせて使用​​できます。
2. アプリケーション例

コードをコピーします。 コードは次のとおりです。 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 :"テキストフィールド",
フィールドラベル:"名前"
},{
xtype:"テキストフィールド",
フィールドラベル:"名前"
},{
xtype:" textfield" ,
fieldLabel:"Name"
},{
xtype:"textfield",
fieldLabel:"Name"
}]
},{
columnWidth: .5 、
layout:"form"、
items:[{
id:"name"、
xtype:"textfield"、
fieldLabel:"photo"、
inputType :" 画像",
幅:250,
高さ:50
}]
}]
},{
xtype:"textfield",
fieldLabel:"証明書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;
}
}
},
ボタン:[{text:"OK"},{text:"キャンセル"}]
}).show() ;
}) ;

コードをコピーします コードは次のとおりです: Ext.onReady(function(){

var _panel = new Ext.Panel({

title:"人事情報",
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}
]
})
});