Anchor锚点布局

  Ext.layout.container.Anchor是根据容器大小为其所包含的子面板进行定位的布局,对应面板布局配置项Anchor。

  1、百分比(Percentage)定位

  代码:

<!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.Anchor示例</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.Anchor示例",

                frame: true,

                width: 300,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "anchor",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF"

                },

                items: [{

                    anchor: "80% 50%", // 第一项宽度百分比,第二项高度百分比

                    title: "子面板"

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

  效果图:

Anchor锚点布局

  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.Anchor示例</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.Anchor示例",

                frame: true,

                width: 300,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "anchor",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF"

                },

                items: [{

                    anchor: "-10 -50",

                    title: "子面板"

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

  效果图:

Anchor锚点布局

  3、参考边(Sides)定位

  代码:

<!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.Anchor示例</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.Anchor示例",

                frame: true,

                width: 300,

                height: 200,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "anchor",

                defaults: {

                    bodyStyle: "background-color:#FFFFFF"

                },

                items: [{

                    anchor: "r b", // r:right b:bottom

                    width: 200,

                    height: 100,

                    title: "子面板"

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

  效果图:

Anchor锚点布局

你可能感兴趣的:(布局)