Set Viewport center to a tab panel

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var viewport = new Ext.Viewport({
      layout: "border",
      id: 'movieview',
      renderTo: document.body,
      items: [{
        region: "north",
        xtype: 'panel',
        html: 'North'
      },{
        region: 'west',
        xtype: 'panel',
        split: true,
        collapsible: true,
        collapseMode: 'mini',
        title: 'Some Info',
        bodyStyle:'padding:5px;',
        width: 200,
        minSize: 200,
        html: 'West'
      },{
        region: 'center',
        xtype: 'tabpanel',
        activeTab: 0,
        items: [{
          title: 'Grid',
          html: 'Center'
        }]
      },{
        region: 'east',
        xtype: 'panel',
        split: true,
        width: 200,
        html: 'East'
      },{
        region: 'south',
        xtype: 'panel',
        html: 'South'
      }]
    });});



</script>
<body>


</body>
</html>

Related examples in the same category

1.	Add viewport to body
2.	Viewport: north, west, center
3.	Use AccordionPanel in a Viewport
4.	collapseMode in a Viewport
5.	Set split to true for east part of the Viewport
6.	Set xtype to panel for Viewport
7.	Ext.Viewport with tree view and table

Set Viewport center to a tab panel : ViewPort « Ext JS « JavaScript DHTML

Related examples in the same category