View Full Version : GeoExt popup moves anchor upon updating html content

27 Apr 2011, 6:39 AM
[solved] (see below for solution) Good morning! I'm hoping someone who has used the GeoExt popup (an extension of Ext window) can help here. Still new to OpenLayers and just started to work with GeoExt/ExtJS 3.3. Using the GeoExt popup example at http://api.geoext.org/1.0/examples/popup-more.html, I attempted to create a popup to open when the mouse is clicked on the map and display values returned from our server at that point. The popup first displays "Updating information..." to let the user know that the data
is being retrieved and then displays it a bit later. The adapted code appeared to work.
However, after the data is retrieved, the popup anchor point repositions downward toward the bottom of the screen when the text in the popup is updated and is no longer positioned where the I clicked
with the mouse. The strange thing is when I collapse the popup and expand it, it repositions again to where the I clicked with the mouse.

Here's relevant code to create and maintain the popup, most taken from the
GeoExt example code, popup-more.js:

// mouse click function for info popup

function addToPopup(loc) {

// create the popup if it doesn't exist
if (!popup) {
popup = new GeoExt.Popup({
title: "Popup",
maximizable: true,
collapsible: true,
map: map,
anchored: true,
html: "Updating<br/>information...",
listeners: {
close: function() {
// closing a popup destroys it, but our reference is truthy
popup = null;
else {

// retrieve data at the point clicked


// reset the popup's location

popup.location = loc;


// since the popup is anchored, calling show will move popup to this location

The getPopupText(loc) function creates the html text for display in the
popup after retrieving information from the server. Relevant part:

wincontent = "Station ID = " + locid + "<br/>" +
"<NOBR>Station Name = " + locname + "</NOBR><br/>" +
"Latitude = " + loclat.toFixed(4) + "<br/>" +
"Longitude = " + loclon.toFixed(4) + "<br/>" +
"Grid Value = " + locvalue.toFixed(2) + locunit;

// set the popup text information with ExtJS


Sorry, I don't have a public page to view. I saw where "Animal" in this post:


indicated the layout is "top-down" dimensions and all dimensions flow from those. Is there a way to specify bottom-up? I couldn't easily find anything in the docs that mentioned how to resize properly.

I have gotten OpenLayers popups to work and they update the popup html upwards instead of downwards so the anchor point doesn't move. They don't look as slick as GeoExt though. Hence my interest in getting this to work. I'm also hoping to include a tab panel too using ExtJS.

BTW, when I debug in Firebug, the location via the mouse click doesn't change when the anchor moves. The popup location property still indicates it's where the user clicked when the html content is changed and the popup resizes downward.

Appreciate any help! Thanks!

Dave M

P.S. I did pose the question to the GeoExt mail list but so far, no one's answered the question. I'll continue to review the ExtJS docs. I've tried several possibilities with no luck so far. But, like I said, still new at this and only been exposed to ExtJS/GeoExt for a few days.

27 Apr 2011, 7:23 AM
[solved] After looking at yet another forum thread which was possibly related to my problem, I discovered that if I first hide the popup after retrieving the information from the server, then call the body.update with the retrieved information, then show the popup, the popup window expands up and the anchors stays were I clicked on the map. So in the getPopupText(loc) function, do this instead:

// set the popup text information with ExtJS


Not sure why I need the second show as there's a show in the popup function. Whatever works I guess. Amazing... searched for a few days on this one as well as posted to OL and GeoExt forums. Have to copy this solution to the other forums.

Well, now to Tabs. Hope not, but might be back. Thanks for everyone's time and something to keep in mind here for these GeoExt popups.

Dave M