Column布局有点象传统html中的table的td，但是也有不同的地方:
先看下代码
<
script type
=
"
text/javascript
"
>
Ext.onReady( function () {
var win = new Ext.Window({
title: " Column Layout " ,
height: 300 ,
width: 400 ,
plain: true ,
layout: ' column ' ,
items: [{
title: " width=50% " ,
columnWidth: 0.5 ,
html: " width=(容器宽度-容器内其它组件固定宽度)*50% " ,
height: 200
},
{
title: " width=250px " ,
width: 200 ,
height: 100 ,
html: " 固定宽度为250px "
}
]
});
win.show();
});
< / script>
Ext.onReady( function () {
var win = new Ext.Window({
title: " Column Layout " ,
height: 300 ,
width: 400 ,
plain: true ,
layout: ' column ' ,
items: [{
title: " width=50% " ,
columnWidth: 0.5 ,
html: " width=(容器宽度-容器内其它组件固定宽度)*50% " ,
height: 200
},
{
title: " width=250px " ,
width: 200 ,
height: 100 ,
html: " 固定宽度为250px "
}
]
});
win.show();
});
< / script>
效果图:
对于一下:
<tr>
<td width="50%"></td>
<td width="30px"><td>
<td></td>
</tr>
在table中,这里第一列会占到整个行的50%的宽度，而在ExtJs的column布局中，百分比是指(容器宽度-有固定width值组件的宽度)后，再乘相应百分比得到的宽度
