Column列布局

vifir新技术学院　|　JAVA开源学院　|　LINUX开源学院　|　。NET开源学院　| 　Ruby学院

当前位置>>首页－学院－vifir新技术学院－ExtJs－ext实战

来源：extshow　作者：　辉老大　2008-06-17 14:58:19.0网友评论：0条　点击：908

　　列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度

列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
</head>

<body>
    <script>
    Ext.onReady(function(){
            var p = new Ext.Panel({
            title: 'column布局',
            width:500,
            height:100,
            layout:'column',//声明布局类型为column
            renderTo:'show',//填充到id为show的区域
            items: [{
                title: '列1',//标题
                html:'<p>列1内容</p>',
                //width:100,//采用固定像素宽度
                columnWidth: .25 //采用比例宽度，相当于百分比，总和为1，这里相当于25%，columnWidth总和必须为1
            },{
                title: '列2',
                html:'<p>列2内容</p>',
                //width:100,
                columnWidth: .25
            },{
                title: '列3',
                html:'<p>列3内容</p>',
                //width:300,
                columnWidth: .5
            }]
        });
    });
    </script>
<div id='show'></div>
</body>
</html>

运行以上代码，将有如下效果：