PDA

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



jnw
26 May 2011, 12:24 PM
hi-

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
2629026291



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 () {
Ext.dispatch({
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) {
response.views.data.imgTiles.setOpacity(newValue);
//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

});
this.add(map);
if (isRefreshRequired) this.doLayout();
}
});

jnw
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.