快速搭建ExtJS布局-CSDN博客

本文链接：https://blog.csdn.net/yanmiemie/article/details/52330342

快速编写demo

创建layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 第一步引入Ext的样式文件 -->
<link type="text/css" rel="stylesheet"
    href="ext-3.4.1/resources/css/ext-all.css"></link>
<!-- 引入Ext库文件，底层驱动 -->
<script src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 引入ext-all -->
<script src="ext-3.4.1/ext-all.js"></script>
<script src="layout.js"></script>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

创建layout.js

// 创建Column布局
    function createColumnPanel1() {
        var panel = new Ext.Panel({
                    width : 600,
                    height : 400,
                    title : "父面板",
                    layout : "column",
                    items : [{
                                title : "面板1",
                                // html:"asdasd",
                                columnWidth : 0.5,
                                height : 180,
                                layout : "column",
                                items : [{
                                            title : "子面板1"
                                        }, {
                                            title : "子面板2"
                                        }]
                            }, {
                                title : "面板2",
                                html : "asdasd",
                                columnWidth : 0.5,
                                height : 50
                            }/*
                             * ,{ title : "面板3", html:"asdasd", width:50, height :
                             * 50 },{ title : "面板4", html:"asdasd", columnWidth :
                             * 0.25, height : 50 }
                             */]
                });
        panel.render("d1");
    }
// 创建Border布局
function createBorderLayoutPanel() {
    var panel = new Ext.Panel({
                width : 600,
                height : 500,
                title : "父面板",
                layout : "border",
                items : [{
                            title : "西(左)",
                            region : "west",
                            //split配置项为true时，panel可以拉伸
                            split : true,
                            //collapsible为true时，panel有个按钮可以收缩和展开
                            collapsible : true,
                            width : 150
                        }, {
                            title : "南（底）",
                            region : "south",
                            height : 100
                        }, {
                            title : "东（右）",
                            region : "east",
                            width : 100
                        }, {
                            title : "北边（顶）",
                            region : "north",
                            height : 100
                        }, {
                            title : "中间（主区域）",
                            region : "center",
                            layout : "border",
                            items : [{
                                        title : "子面板1",
                                        region : "west",
                                        width : "50%",
                                        split : true
                                    }, {
                                        title : "子面板2",
                                        region : "center"
                                    }]
                        }]
            });
    panel.render("d1");
}
// 创建Fit布局
function createFitLayoutPanel() {
    var panel = new Ext.Panel({
                width : 600,
                height : 500,
                title : "父面板",
                layout : "fit",
                items : [{
                            title : "西(左)",
                            width : 150
                        }, {
                            title : "南（底）",
                            height : 100
                        }]
            });
    panel.render("d1");
}
// 创建Accordion布局
function createAccordionLayoutPanel() {
    var panel = new Ext.Panel({
                width : 600,
                height : 500,
                title : "父面板",
                layout : "accordion",
                items : [{
                            title : "西(左)",
                            items : [{
                                        title : "子面板1"
                                    }, {
                                        title : "子面板2"
                                    }, {
                                        title : "子面板3"
                                    }]
                        }, {
                            title : "南（底）",
                            items : [{
                                        title : "子面板1"
                                    }, {
                                        title : "子面板2"
                                    }, {
                                        title : "子面板3"
                                    }]
                        }]
            });
    panel.render("d1");
}
// 创建Anchor布局
function createAnchorLayoutPanel() {
    var panel = new Ext.Panel({
                width : 600,
                height : 500,
                title : "父面板",
                layout : "anchor",
                items : [{
                            title : "西(左)",
                            anchor : "50% 30%",
                            html : "面板1"
                        }, {
                            title : "南（底）",
                            html : "面板2"
                        }]
            });
    panel.render("d1");
}
Ext.onReady(function() {
            //需要什么布局，替换下面的方法就行了
            createAnchorLayoutPanel();
        });

执行效果如下：

Column布局
Border布局
Fit布局
Accordion布局
Anchor布局

知识点解析

layout: String

此容器所使用的布局类型。如不指定，则使用缺省的Ext.layout.ContainerLayout类型。当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型，可指定layoutConfig进一步配置。

ColumnLayout

columnWidth

columnWidth。可采用width（像素）或columnWidth（百分比）的方式来决定面板的尺寸大小，如不为面板指定width或columnWidth，那么将缺省为面板的自动宽度。width的配置项和columnWidth的配置项两者都可以混合使用，但columnWidth的值加起来就一定要是1。

BorderLayout

BorderLayout具有固定性，渲染之后就不会任意变动或改变格局。中央区域（center
region）在BorderLayout设定中不可或缺。假使没有其它的区域，中央布局便会就是该布局的全部区域。布局东南西北中需要用到region：String配置项，属性值分别是：west、east、north、south。