PDA

View Full Version : .add() Container not working in Firefox



abram.darnutzer
19 Jul 2013, 8:10 AM
I am using ExtJS 4.2.
I have a container on a panel. On the Render event, I'm adding a map to that container. Here's the code:


mapwin = Ext.create('Ext.container.Container', {
itemId: 'mapWin',
autoShow: true,
layout: 'fit',
border: false,
items: [{
xtype: 'gmappanel',
itemId: 'gMapPanel',
gmapType: 'map',
plain: true,
zoom: '12',
listeners:{
'mapready':{scope:this,
fn: function(){


mapready = true;
this.getApplication().getController('Map').setMapLocations();


}
}
},
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: '30.275265',
lng: '-97.740519'
}
}]
});
var maparea = Ext.ComponentQuery.query('#map-area')[0];
maparea.add(mapwin);


In Chrome, this works great. But, in Firefox, only a blank area shows up.
When I inspect the areas, the HTML looks to be created differently.
Chrome:
44958

Firefox:
44959

I'm also seeing errors in the Firefox console that's not in Chrome:
Empty string passed to getElementById(). @ app.html (http://localhost/DoublecheckedArchitect/app.html)
Empty string passed to getElementById(). @ ext-all.js:18 (http://localhost/DoublecheckedArchitect/ext/ext-all.js:18)
Use of getAttributeNode() is deprecated. Use getAttribute() instead. @ ext-all.js:18 (http://localhost/DoublecheckedArchitect/ext/ext-all.js:18)

I have no idea why it would be rendering this so differently in the 2 browsers.
Please Help ASAP.
Thanks.

slemmon
19 Jul 2013, 11:48 AM
I wasn't having much luck getting your test case to run in Chrome, but using the below test case the map renders in FF and Chrome for me in 4.2.1.



Ext.widget('panel', {
renderTo: document.body,
height: 500,
width: 500,
itemId: 'map-area',
layout: 'fit'
});


mapwin = Ext.create('Ext.container.Container', {
itemId: 'mapWin',
autoShow: true,
layout: 'fit',
border: false,
items: [{
xtype: 'gmappanel',
plain: true,
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA'
}
}]
});
var maparea = Ext.ComponentQuery.query('#map-area')[0];
maparea.add(mapwin);

abram.darnutzer
19 Jul 2013, 12:22 PM
I'm not seeing any difference in your code and mine, other than the maparea.

Here's how my map area is defined:


{
xtype: 'container',
itemId: 'map-area',
width: 500,
layout: {
type: 'fit'
}
}


Any idea why mine wouldn't work in Firefox?

abram.darnutzer
19 Jul 2013, 12:26 PM
One other thing to note is that I'm creating this in Architect. So, I has to import the GMapPanel. I'm using GMapPanel3.js.

slemmon
19 Jul 2013, 1:05 PM
Is GMapPanel3.js the map panel class you find under the examples/ux folder in the 4.2.1 SDK download?

abram.darnutzer
19 Jul 2013, 1:16 PM
No, the file can be found here: https://github.com/VinylFox/ExtJS.ux.GMapPanel/tree/master/src

I'm using this because it works with the googlemap API v3: https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false

abram.darnutzer
23 Jul 2013, 9:15 AM
Any insight into what could be going on? Do I need to switch to use the regular gmappanel.js? If so, what Google Map API should I be using?

slemmon
25 Jul 2013, 4:08 PM
You might try using the gmappanel from the SDK download:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ux.GMapPanel

When I tested I tested with Google Maps API v3.

abram.darnutzer
26 Jul 2013, 5:24 AM
I've tried using the GMapPanel.js in the examples/ux folder of the SDK. When I use that, I receive this error:

Uncaught Error: Invalid value for property <center>: function (){var a=this,b;if(a.isVisible()){b=a.getAlignToXY(a.container,"c-c");a.setPagePosition(b)}else{a.needsCenter=true}return a}

It's occurring in line 26 of "https://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/9/main.js".

No map is showing up.

slemmon
26 Jul 2013, 9:57 AM
Did my test case work for you? I'm using the gmappanel from the SDK download in 4.2.1.



Ext.widget('panel', {
renderTo: document.body,
height: 500,
width: 500,
itemId: 'map-area',
layout: 'fit'
});




mapwin = Ext.create('Ext.container.Container', {
itemId: 'mapWin',
autoShow: true,
layout: 'fit',
border: false,
items: [{
xtype: 'gmappanel',
plain: true,
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA'
}
}]
});
var maparea = Ext.ComponentQuery.query('#map-area')[0];
maparea.add(mapwin);

abram.darnutzer
26 Jul 2013, 10:01 AM
That is exactly what I'm using, but it's not even working in Chrome.

Am I using the correct Google Map API: "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"?

slemmon
26 Jul 2013, 2:14 PM
Here is the full HTML + JS + CSS that I'm using. *This is what I use for detached test cases so that's why you'll see the library files linked in directly from the CDN instead of relative linking from my webserver.



<html>
<head>
<!-- <link rel='stylesheet' type='text/css' href='http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/ext-theme-classic-all-debug.css'/> -->
<link rel='stylesheet' type='text/css' href='http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all-debug.css'/>
<script type='text/javascript' src='http://cdn.sencha.com/ext/commercial/4.2.1/ext-all.js'></script>
<script type='text/javascript' src='http://cdn.sencha.com/ext/commercial/4.2.1/examples/ux/GMapPanel.js'></script>


<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>


<style>
body {
padding: 20px;
}
</style>




<script tyle='text/javascript'>
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});


Ext.application({
name: 'Test',
launch: function () {


Ext.widget('panel', {
renderTo: document.body,
height: 500,
width: 500,
itemId: 'map-area',
layout: 'fit'
});


mapwin = Ext.create('Ext.container.Container', {
itemId: 'mapWin',
autoShow: true,
layout: 'fit',
border: false,
items: [{
xtype: 'gmappanel',
plain: true,
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA'
}
}]
});
var maparea = Ext.ComponentQuery.query('#map-area')[0];
maparea.add(mapwin);


}
});
</script>
</head>




<body>


</body>
</html>

abram.darnutzer
29 Jul 2013, 7:06 AM
Your code works fine when I run it, but I try to incorporate the same API and code into my Architect project, and it's just not working.

I added a JS Resource for the GoogleMapAPI you are using and the GMapPanel your are using, but I still get the same error:

"Uncaught Error: Invalid value for property <center>: function (){var a=this,b;if(a.isVisible()){b=a.getAlignToXY(a.container,"c-c");a.setPagePosition(b)}else{a.needsCenter=true}return a} " on the main.js for the googlemapAPI

slemmon
30 Jul 2013, 2:48 PM
Just as a test case I copied the application's launch method contents from the preceding test case into the launch method of the Application in Architect. Then I added the GmapPanel as an external resource from the CDN link (may have some additional options with Architect 3 - more details soon). And I added the Google Maps API link as an external resource as well.

All worked ok for me with that as a test.

abram.darnutzer
31 Jul 2013, 5:51 AM
Is it possible for you to send me your test Architect project?

slemmon
31 Jul 2013, 1:14 PM
See if this helps

abram.darnutzer
31 Jul 2013, 1:29 PM
This doesn't contain any of the meta data. Could you send that as well?

slemmon
31 Jul 2013, 1:40 PM
Sorry. Here you go.

abram.darnutzer
1 Aug 2013, 6:36 AM
I'm able to get the map to show up, and I can add my markers (I'm doing this dynamically based on data).

But, I'm not seeing a way to clear the markers from the map with this control and my marker text is no longer showing up.

Do you have any solution for these?

Here's how I am adding my markers:

//Set the Markers
markers = '[';
var locations = this.getLocationsStore().data.items;
locations.forEach(function(location){
markers = markers + '{"lat": ' + location.data.longitude + ', "lng": ' + location.data.latitude + ', "marker": {"title": "' + location.data.locationname + '"}},';
});
markers = markers.substring(0, markers.length - 1);
markers = markers + ']';
markers = JSON.parse(markers);
markers.forEach(function(marker){
currentmap.addMarker(marker);
});

After it's done, you end up with something that looks like this for the markers string:
[{"lat": 30.359175, "lng": -97.730777, "marker": {"title": "Location 1"}},{"lat": 30.360619, "lng": -97.738115, "marker": {"title": "Location 2"}},{"lat": 30.358119, "lng": -97.734121, "marker": {"title": "Location 3"}}]

slemmon
2 Aug 2013, 9:27 AM
You might take a look at the Google Maps API. The GMapPanel is just a light convenience wrapper for a Google Map and while it has some flowthrough methods to the map from the panel component itself you'll probably get the most mileage by getting a reference to the map and acting on it directly using Google's API.

abram.darnutzer
2 Aug 2013, 10:33 AM
Ok, thanks.

Consider this problem resolved.

Thank you for all your help.