學(xué)習(xí)ExtJS Column布局

更新時間：2009年10月08日 00:00:24 作者：

ExtJS Column布局使用說明，需要的朋友可以參考下。

一、屬性（構(gòu)造參數(shù)）
baseCls:"x-plain" Panel背景色顏色。
layout:"column" Panel進行列布局。
在子元素中指定使用columnWidth或width來指定子元素所占的列寬度。
columnWidth表示使用百分比的形式指定列寬度。
width則是使用絕對象素的方式指定列寬度，在實際應(yīng)用中可以混合使用兩種方式。
二、應(yīng)用舉例

復(fù)制代碼代碼如下:

 
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() ; 
}) ; 

復(fù)制代碼代碼如下:

 
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} 
] 
}) 
}) ; 