1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default Unanswered: .add() Container not working in Firefox

    Unanswered: .add() Container not working in Firefox


    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:

    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:
    chrome.jpg

    Firefox:
    firefox.jpg

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

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

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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.

    Code:
    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);
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    I'm not seeing any difference in your code and mine, other than the maparea.

    Here's how my map area is defined:

    Code:
    {
          xtype: 'container',
          itemId: 'map-area',
          width: 500,
          layout: {
                 type: 'fit'
          }
    }
    Any idea why mine wouldn't work in Firefox?

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    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.

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Is GMapPanel3.js the map panel class you find under the examples/ux folder in the 4.2.1 SDK download?
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    No, the file can be found here: https://github.com/VinylFox/ExtJS.ux...ree/master/src

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

  7. #7
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    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?

  8. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    You might try using the gmappanel from the SDK download:
    http://docs.sencha.com/extjs/4.2.1/#...t.ux.GMapPanel

    When I tested I tested with Google Maps API v3.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  9. #9
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,459
    Answers
    437
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Did my test case work for you? I'm using the gmappanel from the SDK download in 4.2.1.

    Code:
    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);
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread