.. _geoext.layout.layout:

Organize the Application Interface Using a ViewPort
===================================================

Viewport
--------

A viewport is 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.

Border Layout
-------------

This viewport can be split in several part called center, east, west, north and south using a ``Ext.layout.BorderLayout`` which will tell how nested panels will arrange (position themselves) against each other.

.. note::
    ViewPort and BorderLayout are two different concepts though a border layout is often used as the layout for a viewport container.

Let's assemble our 3 available panels into a nice layout.

Each item (panel) of a container which layout is of `border`'s type needs a `region` config parameter to be properly positionned. Also, at least one region is required: 'center'. Let's use this region for the `MapPanel`.

.. code-block:: javascript

        Ext.onReady(function() {
            var layers = [
                new OpenLayers.Layer.WMS("Global Imagery",
                    "http://maps.opengeo.org/geowebcache/service/wms", {
                        layers: "bluemarble"
                    }, {
                        buffer: 0,
                        visibility: false
                    }
                ),
                new OpenLayers.Layer.WMS("Tasmania State Boundaries",
                    "/geoserver/wms", {
                        layers: "topp:tasmania_state_boundaries"
                    }, {
                        buffer: 0
                    }
                ),
                // create a group layer (with several layers in the "layers" param)
                // to show how the LayerParamLoader works
                new OpenLayers.Layer.WMS("Tasmania (Group Layer)",
                    "/geoserver/wms", {
                        layers: [
                            "topp:tasmania_water_bodies",
                            "topp:tasmania_cities",
                            "topp:tasmania_roads"
                        ],
                        transparent: true,
                        format: "image/gif"
                    }, {
                        isBaseLayer: false,
                        buffer: 0,
                        // exclude this layer from layer container nodes
                        displayInLayerSwitcher: false,
                        visibility: false
                    }
                )
            ];

            var mappanel = new GeoExt.MapPanel({
                extent: new OpenLayers.Bounds(
                    143.83482400000003, -43.648056,
                    148.47914100000003, -39.573891
                ),
                map: {allOverlays: false},
                layers: layers,
                region: 'center'
            });

            new Ext.Viewport({
                layout: 'border',
                items: [mappanel]
            });
        });

What about using tabs for the left side (west) of the layout?

The following code is to be added as an item to the viewport:
 
.. code-block:: javascript

    {
        xtype: 'tabpanel',
        region: 'west',
        width: 250
    }

Since an ``Ext.TabPanel`` is a `Container`, it can be given items:

.. code-block:: javascript

    activeTab: 0,
    items: [tree, legendPanel]

Now that the "map panel" is included as an item of a container (the viewport), you have to remove the lines that call the ``render`` method (or add a ``renderTo`` config parameter). The viewport container manages this for us.
Same for tree and legend.

Reload your application. You should now see a column on the left with two tabs.

In order to get tabs correctly rendered, you might want to add a title to the tree and legend panels. The given title will be displayed as text in the tab.

.. figure:: layout_viewport.png

    A map and legend in a viewport