ExtJS4 嵌套的border layout

效果图：

 

 

Ext.onReady(function () {

            Ext.widget('panel', {

                layout: 'border',

                width: 600,

                height: 300,

                items: [

                    {

                        title: 'Navigation',

                        region: 'west',

                        margins: '5 0 5 5',

                        collapsible: true, //允许展开 收缩

                        width: 200,

                        split: true

                    },

                    {

                        region: 'center',

                        border: false,

                        layout: 'border',

                        items: [

                            {

                                title: 'North',

                                region: 'north',

                                margin: '5 5 0 0',

                                height: '50%',

                                split: true

                            },

                            {

                                title:'South',

                                region:'center',

                                margins:'0 5 5 0',

                                height: '50%'

                            }

                        ]

                    }

                ],

                renderTo:Ext.getBody()

            });



        });