一个简单的Viewport效果

 <script src="../ext-4.2/bootstrap.js" type="text/javascript"></script>
    <link href="../ext-4.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [
            {
                region: 'north',
                title: 'Page Title',
                html: 'Information goes here',
                bodyPadding: 10,
                height: 100,
                margins: '5 5 5 5'
            },
            {
                // could use a TreePanel or AccordionLayout for navigational items
                region: 'west',
                collapsible: true,
                title: 'Navigation',
                width: 150,
                margins: '0 5 0 5'
            },
            {
                region: 'south',
                title: 'South Panel',
                collapsible: true,
                html: 'Information goes here',
                bodyPadding: 10,
                split: true,
                height: 100,
                minHeight: 100,
                margins: '0 5 5 5'
            },
            {
                region: 'east',
                title: 'East Panel',
                collapsible: true,
                split: true,
                width: 200,
                margins: '0 5 0 0'
            },
            {
                region: 'center',
                xtype: 'tabpanel', // TabPanel itself has no title
                activeTab: 0,     // First tab active by default
                items: {
                    title: 'Default Tab',
                    html: 'The first tab\'s content. Others may be added dynamically',
                    bodyPadding: 10
                }
            }
        ]
            });
        });
    </script>