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

本文展示了一个使用 ExtJS 框架构建的桌面风格应用示例，包括工具条、菜单按钮、树形面板及网格组件等。通过具体代码演示了如何组织布局、配置组件属性与交互事件。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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('toolbar-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 root = new Ext.tree.TreeNode({

                text: '文件夹',

                allowDrag: false,

                allowDrop: false

            });

            root.appendChild([new Ext.tree.TreeNode({
                text: '收件箱',

                allowDrag: false
            }), new Ext.tree.TreeNode({
                text: '发件箱',
                allowDrag: false
            }), new Ext.tree.TreeNode({
                text: '联系人',
                allowDrag: false
            }), new Ext.tree.TreeNode({
                text: '已删除的邮件',
                allowDrag: false
            })]);


            var myData = [['张三', '测试', '2006-1-1'], ['李四', '测试一', '2006-5-6'], ['王五', '测试二', '2007-12-1'], ['刘六', '测试三', '2006-12-1'], ['张三', '测试四', '2007-6-1'], ['李四', '测试五', '2007-7-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试十', '2007-8-1'], ['张三', '测试十一', '2007-9-1'], ['李四', '测试十二', '2007-10-1'], ['王五', '测试十三', '2007-11-1'], ['刘六', '测试十四', '2007-8-1'], ['张三', '测试十五', '2007-9-1'], ['李四', '测试十六', '2007-10-1'], ['王五', '测试十七', '2007-11-1'], ['刘六', '测试十八', '2007-8-1']];


            var ds = new Ext.data.Store({

                proxy: new Ext.data.MemoryProxy(myData),

                reader: new Ext.data.ArrayReader({}, [{
                    name: 'sender'
                }, {
                    name: 'title'
                }, {
                    name: 'sendtime'
                }])

            });

            ds.load();


            var colModel = new Ext.grid.ColumnModel([{
                header: '发送人',
                width: 100,
                sortable: true,
                dataIndex: 'sender'
            }, {
                id: 'title',
                header: '标题',
                width: 100,
                sortable: true,
                dataIndex: 'title'
            }, {
                header: '发送时间',
                width: 75,
                sortable: true,
                dataIndex: 'sendtime'
            }]);


            var viewport = new Ext.Viewport({

                layout: 'border',

                items: [new Ext.BoxComponent({

                    region: 'north',

                    el: 'north-div',

                    tbar: tb,

                    height: 26

                }), new Ext.tree.TreePanel({

                    region: 'west',

                    contentEl: 'west-div',

                    title: '树列表',

                    split: true,

                    width: 200,

                    minSize: 175,

                    maxSize: 400,

                    collapsible: true,

                    margins: '0 0 0 0',

                    root: root

                }), {

                    region: 'center',

                    layout: 'border',

                    items: [new Ext.grid.GridPanel({

                        region: 'west',

                        el: 'center-center',

                        title: '条目列表',

                        ds: ds,

                        cm: colModel,

                        autoScroll: true,
                        split: true,

                        collapsible: true,

                        titlebar: true,

                        height: 200,
                        width: 200,
                        minSize: 100,

                        maxSize: 400


                    }), {

                        region: 'center',

                        contentEl: 'center-south',

                        title: '内容',

                        split: true,

                        collapsible: true,

                        titlebar: true,


                        collapsedTitle: '内容'

                    }]

                }, new Ext.BoxComponent({

                    region: 'south',

                    el: 'south-div',

                    height: 24

                })]

            });


            root.expand()


            function onItemClick(item){

                alert(item.text);

            }

        })
    </script>
    <body>
        <div id="north-div">
            <div id='toolbar-div'>
            </div>
        </div>
        <div id="west-div">
        </div>
        <div id='center-center'>
        </div>
        <div id='center-south'>
        </div>
        <div id="south-div">
            状态栏
        </div>
    </body>
</html>