Column列布局

  Ext.layout.container.Column对应面板布局layout配置项的名称为Column,支持属性columnWidth,每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值来确定列宽

  width配置项是以像素为单位的固定列宽,必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度,必须是大于0小于1的小数,例如.25

 

  1、指定固定列宽

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Ext.layout.container.Column示例</title>

    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.create("Ext.panel.Panel", {

                title: "Ext.layout.container.Column示例",

                frame: true,

                width: 300,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "column",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF;padding:15px",

                    frame: true,

                    height: 100

                },

                items: [{

                    title: "子面板一",

                    width:100,

                    html: "子面板一"

                }, {

                    title: "子面板二",

                    width: 100,

                    html: "子面板二"

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

效果图:

Column列布局

 

  2、使用百分比指定列宽

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Ext.layout.container.Column示例</title>

    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.create("Ext.panel.Panel", {

                title: "Ext.layout.container.Column示例",

                frame: true,

                width: 300,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "column",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF;padding:15px",

                    frame: true,

                    height: 100

                },

                items: [{

                    title: "子面板一",

                    columnWidth: .3

                }, {

                    title: "子面板二",

                    columnWidth: .7

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

效果图:

Column列布局

 

  3、固定值与百分比结合使用

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Ext.layout.container.Column示例</title>

    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.create("Ext.panel.Panel", {

                title: "Ext.layout.container.Column示例",

                frame: true,

                width: 400,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "column",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF;padding:15px",

                    frame: true,

                    height: 100

                },

                items: [{

                    title: "子面板一",

                    width: 100

                }, {

                    title: "子面板二",

                    columnWidth: .3

                }, {

                    title: "子面板三",

                    columnWidth: .7

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

效果图:

Column列布局

你可能感兴趣的:(column)