PDA

View Full Version : Scrolling issues with Google Maps as part of a "longer" panel



schtono
20 Jun 2011, 11:14 PM
Hi guys!

WHAT I WANT TO ACHIEVE:
I want to have a panel (let's call it CONTAINER) that consists of two items:
(1) An Ext.Map item which displays some data from Google Maps
(2) A regular Panel item which displays arbitrary html data *below* the map (1)

As the text in panel (2) can become pretty long, i want the whole CONTAINER to be scrollable vertically.


PROBLEM: When CONTAINER is scrollable, the panning behavior of the map acts very strange. When I pan inside the map, the whole CONTAINER also gets scrolled - roughly by the same amount as the panning, "doubling" every action that I do. It feels pretty annoying and is probably not the desired behavior. Maybe a bug?


CODE TO REPRODUCE:

Ext.setup({

onReady: function() {

var p1 = new Ext.Map({
height: 250,
});

var p2 = new Ext.Panel({
html: 'hallo'
});


// CONTAINER PANEL FOR p1 and p2
var tab1 = new Ext.Panel({
scroll: 'vertical',
items: [p1, p2],
});


// ROOT PANEL
var rootPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [tab1],
});
}
});

DOES anyone have an idea how to fix it? I just want to have the map as an "inline" element in the container...

I've been pulling my hair now for two days and *finally* need your help.
Thanks a lot in advance!!
Philipp

schtono
21 Jun 2011, 12:14 AM
HA! I think I've got a workaround at least:

Adding a "drag"-listener to Ext.map resolves the issue.



Ext.setup({

onReady: function() {

var p1 = new Ext.Map({
height: 250,
width: '50%',
listeners: {
el: {
drag: { fn: function(){} }
}
}
});

var p2 = new Ext.Panel({
html: 'hallo'
});


// CONTAINER PANEL FOR p1 and p2
var tab1 = new Ext.Panel({
scroll: 'vertical',
items: [p1, p2],
});


// ROOT PANEL
var rootPanel = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: [tab1],
});
}
});


I still think this qualifies as a bug, what do you think?