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()
            });

        });