Le portail francophone de la géomatique

Bonjour à tous,

Je réalise une interface web basée sur Mapfish et plus particulièrement sur les widgets choropleth et proportionnal symbol.
J'ai un gros souci pour afficher la légende.
En effet je veux passer par le viewport (le code fonctionne lorsque j'utilise une simple div) et je n'y parviens pas.
Voici mon code :

Pour le widget :
     var choropleth = new mapfish.widgets.geostat.Choropleth({
                    map: carte,
                    layer: choroplethLayer,
                    title: 'Chloroplèthe',
                    nameAttribute: 'NOM_ZONE',

                    indicators:[
            <%
                        for (int i = 0; i < codind.length; i++) {
                            out.println("['" + codind[i] + "_" + datefin[i].replace("-", "_") + "','" + titre[i] + "']");

                            /*
                            if (i != codind.length - 1) {
                            out.println(",");
                            }
                             */


                        }

            %>

                        ],
                        url:"preview",
                        legendDiv : 'myChoroplethLegendDiv',

                        featureSelection: false,
                        loadMask : {msg: 'Chargement...', msgCls: 'x-mask-loading'},
                        defaults: {
                            width: 130
                        },

                        listeners: {
                            collapse: {
                                // hide layer if collapsed
                                fn: function() {
                                    this.layer.setVisibility(false);
                                }
                            },
                            expand: {
                                // show layer if expanded
                                fn: function() {
                                    if (this.classificationApplied) {
                                        this.layer.setVisibility(true);
                                    }
                                }
                            }
                        }
                    });
                    choroplethLayer.events.on({
                        'featureselected': showDetails,
                        'featureunselected': hideDetails,
                        'scope': choropleth
                    });

Et pour le viewport:
                   var viewport = new Ext.Viewport({
                        layout: "border",

                        items:[
                            new Ext.BoxComponent({ // raw
                                region: 'north',
                                el: 'north',
                                height: 140
                            }),{
                                region: 'east',
                                title: 'Analyse thématique ',
                                collapsed: true,
                                split: true,
                                collapsible: true,
                                width: 250,
                                minSize: 175,
                                maxSize: 500,
                                margins: '0 0 0 5',
                                layout: 'accordion',
                                defaults: {
                                    border: true,
                                    frame: true
                                },
                                items: [
                                    choropleth,
                                    propSymbol,
                                    legendsetPanel,

                                ]
                            },
                                legendPanel
                            , {
                                region: "center",
                                id: "map",
                                title: "Carte",
                                layout: "fit",
                                split: true,
                                xtype: 'mapcomponent',
                                map: carte

                            }, {

                                region: 'south',
                                contentEl: 'south',
                                id: 'south-panel',
                                split: false,
                                height: 100,
                                minSize: 100,
                                maxSize: 200,
                                collapsible: true,
                                title: 'Résultats',
                                margins: '0 0 0 0'

                            }, {

                                region:'west',
                                id:'ouest',
                                title:'Gestion des couches',
                                split:true,
                                width:200,
                                items:[ {
                                        id:'tree',
                                        title:'Arborescence',
                                        xtype:'layertree',
                                        map:carte,
                                        model: treeModel,
                                        showWmsLegend: true,
                                        height:300,
                                        plugins: [
                                            mapfish.widgets.LayerTree.createContextualMenuPlugin(['opacitySlideDirect'])
                                        ]

                                    },{
                                        title: 'Carte générale',
                                        html:'<div id="overviewmap"></div>'
                                    },{
                                        id:"raccourcis",
                                        title:"DOM/France Métro",
                                        height:"auto",
                                        xtype:"shortcuts",
                                        map: carte,
                                        store : createShortcutsStore(),
                                        templates : {
                                            header: new Ext.Template("<br/>Zoomez directement sur<br/>"),
                                            footer: new Ext.Template("<br/>Cliquez droit sur les couches pour gérer leur tranparence")
                                        }
                                    }

                                ]
                            }]
                    });

En théorie legendDiv : 'myChoroplethLegendDiv' permet d'afficher la légende dans une div myChoroplethLegendDiv.
Cependant à cause du viewport je ne peux pas mettre ma div directement dans le body...
Comment puis-je afficher ma légende?
Est ce que je dois créer un mappanel?
Merci d'avance pour votre aide!
Cordialement.