ExtJs学习笔记(14)_Column布局

时间:2022-04-24
本文章向大家介绍ExtJs学习笔记(14)_Column布局,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

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值组件的宽度)后,再乘相应百分比得到的宽度