Changeset 274


Ignore:
Timestamp:
03/25/09 17:15:39 (8 years ago)
Author:
tschaub
Message:

Making the examples more like ExtJS examples.

Location:
core/trunk/geoext/examples
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • core/trunk/geoext/examples/mappanel-div.html

    r273 r274  
    11<html>
    2   <head>
    3     <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
    4     <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
    5     <script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
    6     <script type="text/javascript" src="../lib/GeoExt.js"></script>
    7 
    8     <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
    9 
    10     <script type="text/javascript">
    11 
    12     // this example shows the OpenLayerish way to create a map panel. See
    13     // mappanel-window.html for the ExtJSish way to do the same.
    14 
    15     var mapPanel;
    16    
    17     Ext.onReady(function() {
    18         var map = new OpenLayers.Map();
    19         var layer = new OpenLayers.Layer.WMS(
    20             "bluemarble",
    21             "http://sigma.openplans.org/geoserver/wms?",
    22             {layers: 'bluemarble'}
    23         );
    24         map.addLayer(layer);
    25 
    26         mapPanel = new GeoExt.MapPanel({
    27             title: "GeoExt MapPanel",
    28             renderTo: "mappanel",
    29             height: 400,
    30             width: 600,
    31             map: map,
    32             center: new OpenLayers.LonLat(5, 45),
    33             zoom: 4
    34         });
    35     });
    36 
    37     // functions for resizing the map panel
    38     function mapSizeUp() {
    39         var size = mapPanel.getSize();
    40         size.width += 40;
    41         size.height += 40;
    42         mapPanel.setSize(size);
    43     }
    44     function mapSizeDown() {
    45         var size = mapPanel.getSize();
    46         size.width -= 40;
    47         size.height -= 40;
    48         mapPanel.setSize(size);
    49     }
    50 
    51     </script>
    52        
    53   </head>
    54   <body>
    55     <div id="mappanel"></div>
    56     <input type="button" onclick="mapSizeUp()" value="bigger"></input>
    57     <input type="button" onclick="mapSizeDown()" value="smaller"></input>
    58   </body>
     2    <head>
     3        <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
     4        <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
     5        <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
     6        <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
     7        <script type="text/javascript" src="../../ext/ext-all.js"></script>
     8        <script type="text/javascript" src="../lib/GeoExt.js"></script>
     9        <script type="text/javascript" src="mappanel-div.js"></script>
     10    </head>
     11    <body>
     12        <h1>GeoExt.MapPanel with an Existing OpenLayers.Map</h1>
     13        <p>This example shows the how to create a MapPanel with a map that has
     14        already been created.  See <a href="mappanel-window.html">mappanel-window.html</a>
     15        for an example that creates the MapPanel without creating the map first.<p>
     16        <p>The js is not minified so it is readable. See <a href="mappanel-div.js">mappanel-div.js</a>.</p>
     17        <div id="mappanel"></div>
     18        <input type="button" onclick="mapSizeUp()" value="bigger"></input>
     19        <input type="button" onclick="mapSizeDown()" value="smaller"></input>
     20    </body>
    5921</html>
  • core/trunk/geoext/examples/mappanel-window.html

    r273 r274  
    11<html>
    2   <head>
    3     <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
    4     <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
    5     <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
    6     <script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
    7     <script type="text/javascript" src="../lib/GeoExt.js"></script>
    8 
    9     <script type="text/javascript">
    10 
    11     // this example shows the Extish way to create a map panel. See
    12     // mappanel-div.html for the OpenLayerish way to do the same.
    13    
    14     var mapPanel;
    15    
    16     Ext.onReady(function() {
    17         new Ext.Window({
    18             title: "GeoExt MapPanel Window",
    19             height: 400,
    20             width: 600,
    21             layout: "fit",
    22             items: [{
    23                 xtype: "gx_mappanel",
    24                 id: "mappanel",
    25                 layers: [new OpenLayers.Layer.WMS(
    26                     "bluemarble",
    27                     "http://sigma.openplans.org/geoserver/wms?",
    28                     {layers: 'bluemarble'}
    29                 )],
    30                 extent: "-5,35,15,55"
    31             }]
    32         }).show();
    33        
    34         mapPanel = Ext.getCmp("mappanel");
    35     });
    36 
    37     </script>
    38   </head>
    39   <body>
    40   </body>
     2    <head>
     3        <link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css"></link>
     4        <link rel="stylesheet" type="text/css" href="../../ext/examples/shared/examples.css"></link>
     5        <script type="text/javascript" src="../../openlayers/lib/OpenLayers.js"></script>
     6        <script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
     7        <script type="text/javascript" src="../../ext/ext-all.js"></script>
     8        <script type="text/javascript" src="../lib/GeoExt.js"></script>       
     9        <script type="text/javascript" src="mappanel-window.js"></script>
     10    </head>
     11    <body>
     12        <h1>GeoExt.MapPanel in an Ext.Window</h1>
     13        <p>This example shows the how to place a MapPanel in another Ext container
     14        without creating a map first.  See <a href="mappanel-div.html">mappanel-div.html</a>
     15        for an example that creates the map before creating the map panel.<p>
     16        <p>The js is not minified so it is readable. See <a href="mappanel-window.js">mappanel-window.js</a>.</p>
     17    </body>
    4118</html>
Note: See TracChangeset for help on using the changeset viewer.