PDA

View Full Version : GMapPanel (v3) Resize Not Firing



Mark Sisson
29 Jul 2010, 3:10 PM
Hi all.
I'm using a GMapPanel as a portlet in a portal layout (xtype: 'portal'). The problem is that when the portlet panel is resized the map doesn't get redraw. It seems like the GMapPanel isn't firing, or detecting, a resize event. This seems like a pretty simple thing but I can't see where I've got this incorrectly configured.

Thanks for the help.
Mark

Script Includes:


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="lib/extjs-3.2.1/ux/GMapPanel3.js"></script>


GMapPanel definition:

var mymap = {
xtype: 'gmappanel',
zoomLevel: 14,
height: 300,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: { title: 'Fenway Park' }
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: { title: 'Boston Museum of Fine Arts' },
listeners: {
click: function(e) {
Ext.Msg.alert('Its fine', 'and its art.');
}
}
}, {
lat: 42.339419,
lng: -71.09077,
marker: { title: 'Northeastern University' }
}],
listeners: {
resize: function(p, w, h) {
this.onResize(w, h);
}
}
};


Portlet definition:

var dashboardPanel = new Ext.Panel({
id: 'dashboardPanel',
region: 'center',
border: false,
layout: 'border',
items: [{
region: 'west',
id: 'west-panel',
title: 'Tools',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 5 5',
cmargins: '0 5 5 5',
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{
html: 'oh yea bebe!',
title: 'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
},
{
title: 'Settings',
html: 'oh yea bebe!',
border: false,
autoScroll: true,
iconCls: 'settings'
}]
},
{
xtype: 'portal',
region: 'center',
margins: '0 5 5 0',
items: [{
columnWidth: .33,
style: 'padding: 0 0 10 10',
defaults: {style: 'padding: 10 0 0 0'},
items: [{
title: 'Grid in a Portlet',
layout: 'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},
{
title: 'Another Panel 1',
tools: tools,
html: 'oh yea bebe!'
}]
},
{
columnWidth: .33,
style: 'padding: 0 0 10 10',
defaults: {style: 'padding: 10 0 0 0'},
items: [{
title: 'Panel 2',
tools: tools,
html: 'oh yea bebe!'
},
{
title: 'Job Map',
tools: tools,
items: mymap
}]
},
{
columnWidth: .33,
style: 'padding: 0 0 10 10',
defaults: {style: 'padding: 10 0 0 0'},
items: [{
title: 'Panel 3',
tools: tools,
html: 'oh yea bebe!'
},
{
title: '<a href="javascript: alert(\'yo!\')">Job Status</a>',
tools: tools,
items: {
xtype: 'stackedbarchart',
store: store22,
yField: 'interestLevel',
xAxis: new Ext.chart.NumericAxis({
stackingEnabled: true,
labelRenderer: Ext.util.Format.number
}),
series: [{
xField: 'high',
displayName: 'High',
style: { color: Colors.Green.hex }
}, {
xField: 'medium',
displayName: 'Medium',
style: { color: Colors.Orange.hex }
}, {
xField: 'low',
displayName: 'Low',
style: { color: Colors.Red.hex }
}]
}
}]
}]

/*
* Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone.
*/
// ,listeners: {
// 'drop': function(e){
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
// e.columnIndex + '<br />Position: ' + e.position);
// }
// }
}]
});

379548695
9 Aug 2010, 1:11 AM
add listener to panel




listeners : {
'bodyresize' : function(p, w, h) {
Ext.getCmp("map2").onResize(w, maph);
}
},

Mark Sisson
13 Aug 2010, 9:39 AM
Thanks for the reply but the real solution was a little more involved. If you go to the gmap demo on Sencha (http://dev.sencha.com/deploy/dev/examples/window/gmap.html) and run it on IE, if you click on the Gimme Map button and then resize the window larger you'll see it doesn't repaint the gmap. The problem is in the onResize event of the Ext.ux.GMapPanel class in GMapPanel.js (http://dev.sencha.com/deploy/dev/examples/ux/GMapPanel.js).



onResize : function(w, h){

if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}

Ext.ux.GMapPanel.superclass.onResize.call(this, w, h); //called too late for the checkResize()
},

The call to the superclass needs to be called first before the gmap.checkResize() method is called. Once I moved this up, everything worked fine.

goldledoigt
6 Oct 2010, 1:31 AM
Thank you so much Mark