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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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
    4,913
    Answers
    371
    Vote Rating
    179
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread