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