column属性 extjs_学习ExtJSColumn布局_extjs

一、属性(构造参数)

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}

]

})

}) ;

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网