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

      0  

    Default Map tab problem using TabPanel

    Map tab problem using TabPanel


    Dears,

    I'm trying to create TabPanel with more than Tabs, one of them hold Google Map.

    The problem is as follows:

    1- When I lunch the application and the Map Tab is active by default, the Map appears correctly, but I'm not able to use Map controls (Activate Satellite, Zoom In or Zoom Out).

    - Look at the attached snapshot: ActiveFirst.jpg
    - Find the HTML file for the demo in: MapProb\MapActiveFirst.htm
    - Find the JavaScript code for that demo in: MapProb\JS\MainApp.js
    - Watch this video for problem using Mobile Browser: http://www.youtube.com/watch?v=w21MajanGng

    2- When I lunch the application and the Map Tab is NOT active by default, the Map DOSE NOT appears correctly, it appears in the top left corner, but also I'm not able to use Map controls (Activate Satellite, Zoom In or Zoom Out).

    - Look at the attached snapshot: NotActiveFirst.jpg
    - Fing HTML file for the demo in: MapProb\MapNotActiveFirst.htm
    - Find the JavaScript code for that demo: MapProb\JS\YourCode.js
    - Watch this video for the problem from Mobile Browser: http://www.youtube.com/watch?v=8Y7Y8Sb5NlA

    Demo application:

    Click to download - http://www.2shared.com/file/R85drBj0/MapProb.html

    I want the following:

    A. What is the problem with the Map Control in both cases?
    B. Why Map showed in the corner and not appear as full screen when Map Tab not activated by default?
    C. I want tutorial for Google Maps to be used for Mobile Web Development, is it available?

    Regards,
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Just tried this simple test case on PR3 as I know there was problems in PR2 and it works:

    Code:
    Ext.create('Ext.tab.Panel', {
        fullscreen : true,
        items      : [
            {
                xtype : 'map',
                title : 'Map 1'
            },
            {
                xtype : 'map',
                title : 'Map 2'
            }
        ]
    });
    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
    Dec 2011
    Posts
    35
    Vote Rating
    0
    alawibh is on a distinguished road

      0  

    Default


    Dear Mitchellsimoens,

    I downloaded PR3, but when I replace sencha-touch-all.js with the old one this error appear:

    Code:
    NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist.
    This the code after this update:

    http://www.2shared.com/file/0q-oEhC3/MapProb.html

    What is the problem?

    Regards,

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Quote Originally Posted by alawibh View Post
    What is the problem?
    I don't know, I don't have any code from you and I don't follow links.
    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.

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

      0  

    Default


    So, What are the alternatives for NOT following the links?
    How you can provide me with support?

    Regards,

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    Quote Originally Posted by alawibh View Post
    So, What are the alternatives for NOT following the links?
    How you can provide me with support?

    Regards,
    Post code snippets here, enough for me to understand.
    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.

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

      0  

    Default


    This is the code:

    Code:
    var MyClientInfo;
    var tabpanel; 
    var mapdemo; 
    
    
    function UpdateLatesActions(res)
    {
        var MyLogs = res.value;
        var MyHTML = "Test Add HTML";
        document.getElementById("TblContainer").innerHTML = MyHTML;    
    }
    
    
    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);     
        }
        
        
    });
    It was working fine before upgrade code to PR3.

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    1. Biggest problem is you have the html config specified as an Array of a single String. html doesn't accept an Array so making it just be a string allowed this code to render.
    2. dockedItems are deprecated, they should be housed in the items array.
    3. Once I made the first change, things rendered and your map filled the entire height and width of that tab in PR3.
    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.

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

      0  

    Default


    I'm sorry but I didn't understand this:

    Biggest problem is you have the html config specified as an Array of a single String. html doesn't accept an Array so making it just be a string allowed this code to render
    What do you mean? Example? Link?

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,118
    Vote Rating
    855
    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


    From your code:

    Code:
                    {
                        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
                                    }                                
                                }
                            ]
                        }]                            
                    },
    The red text above is not valid. It should be:

    Code:
    html: "My HTML 1",
    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.