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>
<tr> <td width="50%"></td> <td width="30px"><td> <td></td> </tr>
在table中,这里第一列会占到整个行的50%的宽度,而在ExtJs的column布局中,百分比是指(容器宽度-有固定width值组件的宽度)后,再乘相应百分比得到的宽度。