Clear Up
SharpKit Reference

Viewport Class

A specialized container representing the viewable application area (the browser viewport).

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

Like any Container, a Viewport will only perform sizing and positioning on its child Components if you configure it with a layout.

A Common layout used with Viewports is border layout, but if the required layout is simpler, a different layout should be chosen.

For example, to simply make a single child item occupy all available space, use fit layout.

To display one "active" item at full size from a choice of several child items, use card layout.

Inner layouts are available because all Panels added to the Viewport, either through its items, or the add method of any of its child Panels may themselves have a layout.

The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.

An example showing a classic application border layout:

  
    Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Page Title</h1>',
            border: false,
            margins: '0 0 5 0'
            }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
            // could use a TreePanel or AccordionLayout for navigational items
            }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: 'Information goes here',
            split: true,
            height: 100,
            minHeight: 100
            }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
            width: 150
            }, {
            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'
            }
            }]
            });
            

Namespace: Ext.container

Fields

Name Description
allowDomMove
applyTo

Properties

Name Description
isViewport true in this class to identify an object as an instantiated Viewport, or subclass thereof. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.