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

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

<html>

<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 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 north_item = new Ext.Panel({
                title: '北north',
                region: 'north',
                contentEl: 'north-div',
                split: true,
                border: true,
                collapsible: true,
                height: 50,
                minSize: 50,
                maxSize: 120
            });

            //
            var south_item = new Ext.Panel({
                title: 'south',
                region: 'south',
                contentEl: 'south-div',
                split: true,
                border: true,
                collapsible: true,
                height: 50,
                minSize: 50,
                maxSize: 120
            });

            //
            var west_item = new Ext.Panel({

                title: 'west',
                region: 'west',
                contentEl: 'west-div',
                split: true,
                border: true,
                collapsible: true,
                width: 120,
                minSize: 120,
                maxSize: 200


            });

            //中间的中间，表格
            var grid_item = 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


            });


            //中间的南边
            var center_south_item = new Ext.Panel({


                region: 'center',

                contentEl: 'center-south',

                title: '内容标题',

                split: true,

                collapsible: true,

                titlebar: true,


                collapsedTitle: '内容'

            });
            //中间
            var center_item = new Ext.Panel({

                region: 'center',

                layout: 'border',

                items: [grid_item, center_south_item]


            });
            //
            new Ext.Viewport({

                layout: "border",

                items: [north_item, south_item, west_item, center_item]

            });

        });
    </script>
</head>

    <body>
        <div id="north-div">
            north
        </div>
        <div id="south-div">
            south
        </div>
        <div id="west-div">
            west
        </div>
        <div id='center-center'>
        </div>
        <div id='center-south'>
        </div>
    </body>
</html>