Introduction

Une des fonctionnalités qui me semble intéressante dans la librairie GoogleMaps et que je n'ai encore trouvé nulle part ailleurs est la possibilité d'afficher des infobulles avec des onglets. Mais avec l'arrivée de GeoExt et de sa classe Popup hautement personnalisable cela est dorénavant faisable. Regardons comment y arriver.

Création du popup

L'objet Popup de GeoExt hérite de la classe Windows d'EXT. Dans celle-ci il est possible d'ajouter des éléments supplémentaires via la propriété items, dans notre cas nous y ajouterons un objet tabPanel.

Regardons en détail comment cela se passe :

var tab = new Ext.TabPanel({
    activeTab : 0
    ,border:false
    ,items: [{
        title: 'Texte',
        html : "Lorem ipsum dolor sit ame ... id est laborum"
    },{
        title: 'Image',
        html: 'another content'
    }]
});
 
popup = new GeoExt.Popup({
    feature    : e.feature
    ,closable   : false
    ,unpinnable : false
    ,collapse   : false
    ,collapsible: false
    ,resizable : false
    ,width      : 250
    ,height     : 250
    ,anchored   : true               
    ,layout : 'fit'
    ,items: [ tab ]
});

Comme vous pouvez le constater cela n'a rien de compliqué, juste une simple utilisation des composants de base d'Ext et de GeoExt.

Exemple