Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1634 in a recent build.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Exclamation Access the map instance before it is rendered?

    Access the map instance before it is rendered?


    Hi everyone,

    Look at this code:

    Code:
    var MyClientInfo;var tabpanel; 
    var mapdemo; 
    
    function initialize() {
        var position = new google.maps.LatLng(26.23122,50.51097);
        var marker = new google.maps.Marker({
                     position: position,
                     title : 'Sencha HQ'
                });
        mapdemo.map.panTo(position);            
        marker.setMap(mapdemo);
        mapdemo.maps.addOverlay(marker);      
    }
    
    
    
    
    Ext.application({
        name: 'MyApp',
        launch: function() {
    
    
    
    
            var position = new google.maps.LatLng(37.44885,-122.158592);
            infowindow = new google.maps.InfoWindow({
                    content: 'Sencha Touch HQ'
                });
                
            mapdemo = new Ext.Map({
                mapOptions : {
                    center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran
                    zoom : 12,
                    mapTypeId : google.maps.MapTypeId.ROADMAP,
                    navigationControl: true,
                    navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.DEFAULT
                        }
                },
    
    
    
    
                listeners : {
                    maprender : function(comp, map){
                        var marker = new google.maps.Marker({
                                         position: position,
                                         title : 'Sencha HQ',
                                         map: map
                                    });
    
    
    
    
                                    google.maps.event.addListener(marker, 'click', function() {
                                         infowindow.open(map, marker);
                                    });
                        setTimeout( function(){ map.panTo (position); } , 1000);
                    }
                }
            });
                       
            tabpanel = Ext.create("Ext.tab.Panel", {
                xtype:'tabpanel',
                id: 'tabpanel',            
                fullscreen: true,
                tabBarPosition: 'bottom',
                items: [
                    {
                        title: 'Home',
                        iconCls: 'MyHome',
                        scroll: 'vertical',
                        html: [ "My HTML 1"    ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        // function
                                    }                                
                                }
                            ]
                        }]                            
                    },               
                    {
                        xtype: 'list',
                        title: 'Snapshot',
                        iconCls: 'Snapshot',
                        itemTpl: "<b>{title}:</b> {desc}",
                        store: {
                            fields: ['title', 'desc'],
                            data: [
                                {title: 'Name', desc: "Sencha Name"},
                                {title: 'Email', desc: "Sencha Email"},
                                {title: 'Mobile 1', desc: "Sencha Mobile 1"},
                                {title: 'Mobile 2', desc: "Sencha Mobile 2"}
                            ]
                        }
                    },
                    {
                        title: 'History',
                        iconCls: 'History',
                        html: [ "My HTML 2" ].join("")
                    },  
                    {
                        id: 'ViolationsTab',
                        title: 'Violations',
                        iconCls: 'Violations',
                        scroll: 'vertical',
                        badgeText: "5",
                        html: [ "<div id='TblContainerV'>My HTML 3</div>" ], 
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                    }                                
                                }
                            ]
                        }]                            
                    },                
                    {
                        title: 'Map',
                        iconCls: 'Map',
                        layout: 'fit',
                        
                        items: [mapdemo],
                        dockedItems: [{
                            xtype: "toolbar",
                            docked: 'top',
                            items: [ 
                                {
                                    xtype: "spacer", 
                                },
                                {
                                    xtype: "button", 
                                    text: "Refresh", 
                                    handler: function () { 
                                        //Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
                                        //initialize();
                                    }                                
                                }
                            ]
                        }]
                    }                                                
                ]
            }).setActiveItem(0);     
        }    
    });
    Map created fine, but when I try to use Map instance (mapdemo), it does NOT work.
    I need to use this instance to deal with map: Add markers, Overlays, ...etc.

    When I call this function:

    Code:
    function initialize() {
        var position = new google.maps.LatLng(26.23122,50.51097);
        var marker = new google.maps.Marker({
                     position: position,
                     title : 'Sencha HQ'
                });
        mapdemo.map.panTo(position);            
        marker.setMap(mapdemo);
        mapdemo.maps.addOverlay(marker);      
    }
    I got the following error:
    TypeError: 'undefined' is not an object (evaluating 'mapdemo.map.panTo')
    Attached snapshot.

    BTW, I tried this:

    Code:
            var panel  = tabpanel.getComponent(0),
            index  = tabpanel.getItems().indexOf(panel),
            tabBar = tabpanel.getTabBar(),
            HomeObj   = tabBar.getItems().getAt(index);
            console.log(HomeObj);
    But it didn't work . I changed the Zero index to Map Component index, but no luck.

    How I can proceed to continue coding with the Map?
    Any available tutorial?

    Regards,
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    828
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Instead of using the map property, use getMap() on the Ext.Map instance.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    kinestetic is on a distinguished road

      0  

    Default


    Function that does something with map (adding marker for example):

    Code:
    /* mappanel - Ext.Map instance*/
    function addMarker(mappanel) {
        var map=mappanel.getMap(),
        position = new google.maps.LatLng(26.23122,50.51097),
        marker = new google.maps.Marker({
            position: position,                 
            title : 'Sencha HQ',                 
            icon:'http://a3.twimg.com/profile_images/1089012240/sencha-logo_normal.png'
        });
        map.panTo(position);
        marker.setMap(map);
    }

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    Hi every1,

    I tried what you suggest both, but getting the Object in only one condition:

    - When I create the map in the first Tab of the panel, and activate that tab initially.
    - Or, visit the map tab and wait it to load, after that executing the code of adding markers for example.

    Both ways is NOT applicable for my application, any suggestions?

    Thanks for your help.

    Regards,

  5. #5
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    This is because the Map instance is not created until the Map component is actually rendered.

    We done this because of sizing problems, but I've been told that we might be able to fix it now. So I'm opening it as a ticket.

    Thanks.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    kinestetic is on a distinguished road

      0  

    Default


    May be 'maprender' event will be helpfull. Тo fire 'maprender' event, you need to set Ext.Map panel as active item in your tabpanel, after that you can set as active item something else. No need to wait. Unfortunately there is no autoRender.
    P.S
    There is private method 'renderMap()' that fire 'maprender' event.

  7. #7
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Using the maprender event will work for now. I have also changed the code a bit so you will be able to use to use the map instance much earlier and still avoids TOUCH-1030 which happens when the map is rendered offscreen.

    Sencha Inc

    Jamie Avins

    @jamieavins

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    8
    Vote Rating
    0
    kinestetic is on a distinguished road

      0  

    Default


    Wonderfull! Now I can clear my map-render hooks . Thanks!

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi