Ext-border布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/ext/resources/ext/resources/ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css">
    <script src="/ext/resources/ext/ext-all-dev.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <script type="text/javascript">

        Ext.onReady(function () {
            var data = []

            var html = "<div class=\"description\"><div class=\"short\">单击按钮的时候触发的事件，在 handler事件调用前触发，而handler事件将返回一个\n" +
                "false代码不执行 ...</div><div class=\"long\"><p>单击按钮的时候触发的事件，在 <a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a>事件调用前触发，而<a href=\"#!/api/Ext.button.Button-cfg-handler\" rel=\"Ext.button.Button-cfg-handler\" class=\"docClass\">handler</a>事件将返回一个\n" +
                "false代码不执行</p>\n" +
                "<h3 class=\"pa\">Parameters</h3><ul><li><span class=\"pre\">this</span> : <a href=\"#!/api/Ext.button.Button\" rel=\"Ext.button.Button\" class=\"docClass\">Ext.button.Button</a><div class=\"sub-desc\">\n" +
                "</div></li><li><span class=\"pre\">e</span> : Event<div class=\"sub-desc\"><p>The click event</p>\n" +
                "</div></li><li><span class=\"pre\">eOpts</span> : <a href=\"#!/api/Object\" rel=\"Object\" class=\"docClass\">Object</a><div class=\"sub-desc\"><p>The options object passed to <a href=\"#!/api/Ext.util.Observable-method-addListener\" rel=\"Ext.util.Observable-method-addListener\" class=\"docClass\">Ext.util.Observable.addListener</a>.</p>\n" +
                "\n" +
                "\n" +
                "\n" +
                "</div></li></ul></div></div>";

            var button1  = Ext.create('Ext.Button',{
                text:'点击改变中心区域内容',
                listeners:{
                    click:function () {
                        var container = Ext.getCmp("centerContainer");
                        var centerRegion = Ext.getCmp("centerRegion");
                        container.remove(centerRegion)
                        container.add({
                            xtype:'panel',
                            title:"这是新增的panel",
                            html:html
                        });
                    }
                }
            });

            var panelEast = Ext.create('Ext.panel.Panel',{
                layout:'fit',
                html:'<p>pane1East pane1East pane1East pane1East pane1East pane1East</p>'
            });

            var panelWest = Ext.create('Ext.panel.Panel',{
                layout:'fit',
                html:'<p>pane1West pane1West pane1West pane1West pane1West pane1West</p>'
            });

            var panelNorth = Ext.create('Ext.panel.Panel',{
                layout:'fit',
                html:'<p>pane1North pane1North pane1North pane1North pane1North pane1North</p>',
                items:[button1]
            });

            var panelSouth = Ext.create('Ext.panel.Panel',{
                layout:'fit',
                html:'<p>pane1South pane1South pane1South pane1South pane1South pane1South</p>'
            });

            var panelCenter = Ext.create('Ext.panel.Panel',{
                layout:'fit',
                html:'<p>pane1Center pane1Center pane1Center pane1Center pane1Center pane1Center</p>'
            });

            var viewport = Ext.create('Ext.Viewport',{
                layout:'border',
                defaults:{
                    split:true,
                    collapsible:true
                },
                items:[{
                    title:'北',
                    region:'north',
                    height:300,
                    items:panelNorth
                },{
                    title:'南',
                    region:'south',
                    split:false,
                    margin:5,
                    items:panelSouth
                },{
                    title:'东',
                    region:'east',
                    collapseMode:'mini',
                    items:panelEast
                },{
                    title:'西',
                    region:'west',
                    items:panelWest
                },{
                  xtype:'container',
                  region: 'center',
                  layout:'fit',
                  id:'centerContainer',
                  items: {
                      title:'Center Region',
                      id:'centerRegion',
                      html:'中心区域'
                  }
            }]
            });
            viewport.show();

        });

    </script>
    <title>Title</title>
</head>
<body>
<div id="id1"></div>
</body>
</html>

 

posted @ 2022-04-07 16:40  `安安安安安  阅读(28)  评论(0)    收藏  举报