View Full Version : Slider docked to bottom of Google Map - Bug or code error?

26 May 2011, 12:24 PM

I have a slider docked to the bottom of a Google Map. It behaves as expected when testing in Chrome but on iPhone and iPad the slider jumps to the top of screen after interacting with it. A small pinch or zoom of the map puts the slider back in the right place. Has anyone seen this? Is it a bug or is something wrong with my code? I've also tried adding a bottom toolbar and placing the slider there but only part of the slider knob is displayed. Any solution to stop the current behavior would be welcomed.

Relevant parts of the code are below. Screen captures showing this also attached

OK Onload After slide

response.views.ResponseMap = Ext.extend(Ext.Panel, {
dockedItems: [{
xtype: 'toolbar',
title: 'Red River Response Map',
dock: 'top',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function () {
controller: response.controllers.responseController,
action: 'backToResponseList'
scope: this
}, {
xtype: 'sliderfield',
dock: 'bottom',
ui: 'dark',
increment: 1,
minValue: 0,
maxValue: 100,
value: 100,
listeners: {
scope: this,
drag: function (slider, thumb, newValue) {
if (response.views.data && response.views.data.imgTiles) {
//console.log(newValue); For debugging slider
scope: this
initComponent: function () {
response.views.ResponseMap.superclass.initComponent.apply(this, arguments);
addMap: function (data) {
var pos = new google.maps.LatLng(data.lat, data.long);

var map = new Ext.Map({
fullscreen: true,
//title: data.siteid,
//markerDesc: desc,
markerPos: pos,
mapOptions: {
zoom: zoomlevel,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pos,
mapTypeControl: true,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.ZoomControlStyle.SMALL
scrollwheel: false,
streetViewControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
listeners: {
delay: 500,
maprender: function (comp, map) {
// Removed to shorten the post

if (isRefreshRequired) this.doLayout();

27 May 2011, 9:56 AM
Dumb mistake. My panel was missing a layout. Setting the config:

layout: 'fit'

Seems to fix the issue.

Hope this helps someone else.