手记

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


0人推荐
随时随地看视频
慕课网APP