Results 1 to 6 of 6

Thread: Google map insensitive for events in Sencha Touch 2

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: Google map insensitive for events in Sencha Touch 2

    I have a google map defined in Sencha touch 2. It's showing the map, but it's not responding on touch events, it's freezed. I can't move or zoom it although the controls are present.

    Ext.define('AddressBook.view.contact.Show', {
    extend: 'Ext.Panel',
    xtype: 'contact-show',
    requires: [
    'Ext.Map'
    ],
    config: {
    title: 'Information',
    layout: 'card',
    items: [
    {
    xtype: 'map',
    mapOptions : {
    zoom : 15,
    mapTypeId : google.maps.MapTypeId.ROADMAP,
    navigationControl: true,
    navigationControlOptions: {
    style: google.maps.NavigationControlStyle.DEFAULT
    }
    }
    }
    ]},

    centerMap: function(newRecord) {
    ...
    },

    setMarkers: function(markers) {
    ...
    }
    });

    I created it in app.js:

    Ext.Loader.setConfig({ enabled: true });

    Ext.application({
    ...

    launch: function() {
    Ext.Viewport.add({
    xclass: 'AddressBook.view.contact.Show'
    });
    }
    });

    I include the google script in index.html:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"</script>


    The thing is that the "Map" example that you are providing seems to work fine. But it's using Ext.setup() and Ext.create() to show the map in app.js. I can't figger out why it's working fine that way. But also I can't use that way of creating the map. Anyone knows what's the problem?

  2. Found the problem.
    The 'map' example from Sencha that worked has a script included that does not exist in the sample, but exists in another sample I used as a template for my project.

    <link rel="stylesheet" href="css/example.css" type="text/css"/>

    BY THE SAKE OF THIS NON EXISTING SCRIPT INCLUDE GOOGLE MAPS IS WORKING.

    In other words if you include it in your project with Google maps, it will become irresponsive!<br>I had to strip the 'map' example down to finally find the problem, cost me a lot of time, thanks to someone not cleaning his code before it becomes an example!

    I ask the Sencha Team to remove this confusing code from their examples.

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    101
      0  

    Default

    You can try
    Code:
    var mapPanel = Ext.create('AddressBook.view.contact.Show', {
        itemId: 'mapPanel'
    });
    Ext.Viewport.add(mapPanel);

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
      0  

    Default

    How do I apply the name "AddressBook" in this case to the app? It can't find AddressBook.view.contact.Show because it's not replace it with app/ in the path.
    In the other case you do:
    Ext.application({
    name:"AddressBook",
    ...

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by jerome76 View Post
    You can try
    Code:
    var mapPanel = Ext.create('AddressBook.view.contact.Show', {
        itemId: 'mapPanel'
    });
    Ext.Viewport.add(mapPanel);
    Looks like this solution is not possible, since the documentation sais Ext.application(..) is required using MVC in Sencha Touch. So if you have a package structure you can't use Ext.create(..) in the root app.js file.

  6. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Found the problem.
    The 'map' example from Sencha that worked has a script included that does not exist in the sample, but exists in another sample I used as a template for my project.

    <link rel="stylesheet" href="css/example.css" type="text/css"/>

    BY THE SAKE OF THIS NON EXISTING SCRIPT INCLUDE GOOGLE MAPS IS WORKING.

    In other words if you include it in your project with Google maps, it will become irresponsive!<br>I had to strip the 'map' example down to finally find the problem, cost me a lot of time, thanks to someone not cleaning his code before it becomes an example!

    I ask the Sencha Team to remove this confusing code from their examples.

  7. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    5
    Answers
    1
    Vote Rating
    0
      0  

    Default

    The example 'navigationview' needs the example.css for it's style. It seems to corrupt Google Maps because in this example the map is freezed too! I looked into it and it contains 3 errors, 490 warnings and 22 weak warnings. But it's too big for me to find out which style corrupts the google map.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •