X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.Viewport.html diff --git a/docs/output/Ext.Viewport.html b/docs/output/Ext.Viewport.html index d9d95ae9..11c77554 100644 --- a/docs/output/Ext.Viewport.html +++ b/docs/output/Ext.Viewport.html @@ -1,67 +1,67 @@ -
Properties Methods Events Config Options Direct Link 
Observable
  Component
    BoxComponent
      Container
        Viewport

Class Ext.Viewport

Package:Ext
Defined In:Viewport.js
Class:Viewport
Extends:Container
xtype:viewport

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. Inner layouts are available by virtue of the fact that all Panels -added to the Viewport, either through its items, or through the 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:

new Ext.Viewport({
-    layout: 'border',
-    items: [{
-        region: 'north',
-        html: '<h1 class="x-panel-header">Page Title</h1>',
-        autoHeight: true,
-        border: false,
-        margins: '0 0 5 0'
-    }, {
-        region: 'west',
-        collapsible: true,
-        title: 'Navigation',
-        width: 200
-        // the west region might typically utilize a TreePanel or a Panel with Accordion layout 

-    }, {
-        region: 'south',
-        title: 'Title for Panel',
-        collapsible: true,
-        html: 'Information goes here',
-        split: true,
-        height: 100,
-        minHeight: 100
-    }, {
-        region: 'east',
-        title: 'Title for the Grid Panel',
-        collapsible: true,
-        split: true,
-        width: 200,
-        xtype: 'grid',
-        // remaining grid configuration not shown ...

-        // notice that the GridPanel is added directly as the region

-        // it is not "overnested" inside another Panel

-    }, {
-        region: 'center',
-        xtype: 'tabpanel', // TabPanel itself has no title

-        items: {
-            title: 'Default Tab',
-            html: 'The first tab\'s content. Others may be added dynamically'
-        }
-    }]
-});

Config Options

Config OptionsDefined By