学习ExtJS Column布局

172 阅读 0 评论 114 点赞

我是靠谱客的博主糊涂狗，最近开发中收集的这篇文章主要介绍学习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} 
] 
}) 
}) ; 