ext之border布局一-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18107/article/details/81685418


<html pageEncoding="utf-8">

<head>

<title></title>
 <link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
 <script>

        Ext.onReady(function(){

            var tb = new Ext.Toolbar('north-div');//创建一个工具条
            tb.add(new Ext.Toolbar.SplitButton({

                text: '文件',

                cls: 'x-btn-text-icon blist',

                menu: {
                    items: [{
                        text: '新建',
                        handler: onItemClick
                    }, {
                        text: '保存',
                        handler: onItemClick
                    }, {
                        text: '加载',
                        handler: onItemClick
                    }]
                }
            }), new Ext.Toolbar.MenuButton({

                text: '编辑',

                cls: 'x-btn-text-icon blist',

                menu: {
                    items: [{
                        text: '复制',
                        handler: onItemClick
                    }, {
                        text: '粘贴',
                        handler: onItemClick
                    }]
                }
            }));

            var viewport = new Ext.Viewport({

                layout: 'border',

                items: [{

                    border: false,

                    region: 'north',

                    contentEl: 'north-div',

                    tbar: tb,

                    height: 26

                }, new Ext.TabPanel({

                    region: 'center',

                    deferredRender: false,

                    activeTab: 0,

                    items: [{

                        contentEl: 'center-div',

                        title: '内容',

                        closable: true,

                        autoScroll: true

                    }]

                }), {

                    region: 'south',

                    contentEl: 'south-div',

                    height: 28,

                    margins: '0 0 0 0'

                }]

            });

            function onItemClick(item){

                alert(item.text);

            }

        })
    </script>
 </head>
    <body>
        <div id="north-div">
        </div>
        <div id="center-div">
            内容
        </div>
        <div id="south-div">
            状态栏
        </div>
    </body>
</html>