Border边框布局

  Ext.layout.container.Border对应面板布局layout配置项的名称为Border,该布局包含多个子面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,分别是:east(东)、south(南)、west(西)、north(北)和center(中)。加入到容器中的子面板需要指定region配置项来告知容器要加入到那个部分。

  代码:

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

                frame: true,

                width: 500,

                height: 300,

                renderTo: Ext.getBody(),

                bodyPadding: 5,

                layout: "border",

                defaults: {

                    collapsible: true

                },

                items: [{

                    title: "north panel",

                    html: "",

                    region: "north",

                    height: 50

                }, {

                    title: "south panel",

                    html: "",

                    region: "south",

                    height: 50

                }, {

                    title: "west panel",

                    html: "",

                    region: "west",

                    width:100

                }, {

                    title: "east panel",

                    html: "",

                    region: "east",

                    width: 100

                }, {

                    title: "center panel",

                    html: "",

                    region: "center"

                }]

            });

        });

    </script>

</head>

<body>

</body>

</html>

  效果图:

Border边框布局

你可能感兴趣的:(border)