學習ExtJS Column佈局的方法

學識都 人氣:1.61W

一、屬性(構造參數)

學習ExtJS Column佈局的方法

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}

]

})

}) ;