1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    MartinJmz is on a distinguished road

      0  

    Question Problems with Google Maps API¨and Tabpanel

    Problems with Google Maps API¨and Tabpanel


    Hi

    I have problems when use TabPanel and Google Maps API, I create two TabPanel, the center panel contains a maps of google, and the left panel I used control for manipulate the info into the google maps, but this panel has hide propierty, when open the site don't have any problems. the problems occurs when hidden the left panel, the center panel don't refresh and see gray zone where stay the left panel. somebody could tell me what I need for the center panel refresh when the left panel is hidden?

  2. #2
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Its hard to say, since you provided no code.

    This example does what your describing, so take a look and see if you spot any differences...

    http://code.google.com/p/ext-ux-gmap...les/fullscreen

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Please post in the correct forum and read http://extjs.com/learn/Ext_Forum_Help

  4. #4
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    @MartinJmz - please read that link that tryanDLS provided, and post your code again.

  5. #5
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    @MartinJmz - please read that link that tryanDLS provided, and post your code again.

    Nowhere did I ask you to direct message me your code.

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Exclamation I'm getting the same problem.

    I'm getting the same problem.


    I am not sure I posted this yesterday. Anyways, I am getting problem implementing not only Google Maps, but Virtual Earth.

    Here are the behaviors:
    The window shows the toolbars in the correct position, but when it comes time to pan or zoom, the images returned only requests an awkward div size.

    Here is the slightly bad workaround:
    In the case of Google Maps Panel, I have to move the portlet to another column, switch to another tab panel and switch back, and then the map will refresh with the entire panel.
    In the case of a Virtual Earth Panel, I have to double click the map to zoom, and the map will refresh with the entire panel.


    Here's my Virtual Earth Class.
    Code:
    Ext.namespace("Ext.ux.maps");
    Ext.ux.maps.VirtualEarthPanel = Ext.extend(Ext.Panel, {
        cls: 'map',
        
        initComponent: function () {
            var defConfig = {
                layout: 'fit',
                border: true
            };
            Ext.applyIf(this, defConfig);
            Ext.ux.maps.VirtualEarthPanel.superclass.initComponent.call(this);
            this.addEvents('maploaded');
        },
        
        constructor: function(config) {
            config = config || {};
            Ext.apply(config, {
            });
            Ext.ux.maps.VirtualEarthPanel.superclass.constructor.call(this);
        },
        
        afterRender : function(){
            
            var wh = this.ownerCt.getSize();
            Ext.applyIf(this, wh);
            
            Ext.ux.maps.VirtualEarthPanel.superclass.afterRender.call(this);
            try{
                this.map = new VEMap(this.body.dom['id']);
                this.map.LoadMap();            
            }
            catch (e)
            {
                Ext.Msg(e.message);
            }
        }
        
    });
    Ext.reg('virtualearthpanel', Ext.ux.maps.VirtualEarthPanel);
    Code:
    var mapConfig = {
                title: 'Map',
                xtype: 'panel',
                animCollapse: false,
                tools: tools,
                layout: 'fit',
                height:400,
                items: [{xtype: 'virtualearthpanel'}]
    }
    Put it into a portal, tabbed panel, window. You will get some problems, and I think it is div/css issue, that I am not quite sure how to fix.

    I am also using layout: 'fit', but I am not sure this is correct.
    Attached Images

  7. #7
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    7
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Not sure about Virtual Earth, but Maps requires that you let the map class know that it needs to re-size itself to fit in the container...

    Code:
    your_map.checkResize();
    Also, is there a reason your nesting the map panel in another panel, instead of doing something like this...

    Code:
    var mapConfig = {
                title: 'Map',
                xtype: 'virtualearthpanel',
                animCollapse: false,
                tools: tools,
                layout: 'fit',
                height:400
    }

  8. #8
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Post


    @VinylFox, I will check to see if need to implement the checkResize.

    If I can find the reason why the tab panel is not displaying the title in this case, then I would implement it like this. Any suggestions as to why it is not working out. Also, in the case of portlets, is it not expecting a portlet instead of panel. So in a portlet I'm placing the map inside the items.

  9. #9
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Exclamation


    Ok I put alerts all over onResize and setSize.

    I am wondering why the checkResize is before the superclass call.

    Code:
        onResize : function(w, h){
            
            if (typeof this.gmap == 'object') {
                alert(w+", "+h);
                    this.gmap.checkResize();
            }
            Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
        },
    And it calls onResize and setSize a dozen times:
    setSize(304,371) -> onResize(304,371) -> setSize(304,371)
    -> setSize(838,371) -> onResize(838,371) -> setSize(838,371)
    -> onResize(838,371) -> setSize(838,371)

    So I figured there must be a delay or wait to ignore subsequent requests to checkResize()

    So I waited, and dismissed the alert field on one of the latter resizes, and sure enough it worked.

    So I am trying to do a setInterval or setTimeout on this, but is there a Ext version to do this?!?.

    I want to determine whether this.gmap.isLoaded() == true then perform checkResize.

  10. #10
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
    CrazyEnigma is on a distinguished road

      0  

    Thumbs up put checkResize on load bind with google.

    put checkResize on load bind with google.


    Maybe someone could tell me where this is better placed.

    In GMapPanel.js
    Code:
            GEvent.bind(this.gmap, 'load', this, function(){
                this.onMapReady();
                this.gmap.checkResize();                
            });
    It's not pretty, but I figured that because the checkResize had to wait for the load, and Google Maps API needed to load first, that it had to wait for the load event before it could send the checkResize.