[Users] Problem with regions

Wed Feb 15 13:24:36 CET 2012

Hi,
Following the tree tutorial I've created a map with a layerTree, It works
but I want the tree in the west region and map at center, but instead of
this, all is displayed at left side with the tree up the map.  What I'm
doing wrong?

Thanks a lot!

The whole code is:

<html>
<head>

<title> Projectes AUMA </title>
<script src="ext-3.3.1/adapter/ext/ext-base.js"
type="text/javascript"></script>
<script src="ext-3.3.1/ext-all.js"  type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="ext-3.3.1/resources/css/ext-all.css"></link>
<script src="OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="GeoExt/resources/geoext-all-debug.css"></link>

<script type="text/javascript">

var mapPanel, tree;
Ext.onReady(function() {
    // create a map panel with some layers that we will show in our layer
tree
    // below.

mapPanel = new GeoExt.MapPanel({
        border: true,
        region: "center",
map: new OpenLayers.Map(),
        renderTo: 'gxmap',
        height: 500,
        width: 800,
title: 'Projectes AUMA',
zoom: 4,
center: new OpenLayers.LonLat (-3,38),
        layers: [
            new OpenLayers.Layer.WMS(
"World", "http://www.opengis.uab.es/cgi-bin/world/MiraMon.cgi?",
{
layers:['BlueMarble_NG','admin_level1-world']
}, {
                    buffer: 0,
                    visibility: false
                }
            ),

            new OpenLayers.Layer.WMS(
"Projectes UTM31",
"http://localhost:8080/geoserver/AUMA/wms",
{
                     layers: 'AUMA:Projectes_UTM31',
 transparent:true,
 format: 'image/png'},
 {
 isBaseLayer:false,
 buffer: 0
}
),
new OpenLayers.Layer.WMS(
"Projectes UTM30",
"http://localhost:8080/geoserver/AUMA/wms",
{
                     layers: 'AUMA:Projectes_Esp',
 transparent:true,
 format: 'image/png'},
 {
 isBaseLayer:false,
 buffer: 0
}
)

        ]
    });

var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new
GeoExt.tree.TreeNodeUIEventMixin());
 var treeConfig = [{
        nodeType: "gx_baselayercontainer"
    }, {
        nodeType: "gx_overlaylayercontainer",
        expanded: true,
        // render the nodes inside this container with a radio button,
        // and assign them the group "foo".
        loader: {
            baseAttrs: {
                radioGroup: "foo",
                uiProvider: "layernodeui"
            }
        }
    }];
 var layerList = new GeoExt.tree.LayerContainer({
    text: 'Capes',
    layerStore: mapPanel.layers,
    leaf: false,
    expanded: true
});

var layerTree = new Ext.tree.TreePanel({
    title: 'Map Layers',
    renderTo: 'layerTree',
    root: layerList,
border: true,
    region: "west",
width: 200,
    split: true,
    collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        plugins: [
            new GeoExt.plugins.TreeNodeRadioButton({
                listeners: {
                    "radiochange": function(node) {
                        alert(node.text + " is now the active layer.");
                    }
                }
            })
        ],
loader: new Ext.tree.TreeLoader({
            // applyLoader has to be set to false to not interfer with
loaders
            // of nodes further down the tree hierarchy
            applyLoader: false,
            uiProviders: {
                "layernodeui": LayerNodeUI
            }
        }),
listeners: {
            "radiochange": function(node){
                alert(node.layer.name + " is now the the active layer.");
            }
        },
rootVisible: false,
    lines: false
});

new Ext.Viewport({
        layout: "fit",
        hideBorders: true,
        items: {
            layout: "border",
            deferredRender: false,
            items: [mapPanel, layerTree, {
                contentEl: "desc",
                region: "east",
                bodyStyle: {"padding": "5px"},
                collapsible: true,
                collapseMode: "mini",
                split: true,
                width: 200,
                title: "Description"
            }]
        }
    });

});

</script>
</head>
<body>

<div id="gxmap"></div>
<div id="layerTree"></div>

</body>
</html>

-- 
http://kikocanas.blogspot.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20120215/a261fc8e/attachment.htm 