title: Sencha Touch: Ext.Map within TabPanel
body: <p>I'm quite new to sencha touch. The goal is to create an app which has a TabPanel containing four Tabs, one of them should be a map (the others are a NestedList and two Panels working like a charm). I've tried to make the map card like</p>
  <pre><code>NPApp.views.Mapcard = Ext.extend(Ext.Map, { ...
  </code></pre>
  <p>where I ended up with getting really strange results like some views are overlapping and no map is shown.</p>
  <p>The second try was to creating a Panel, embed it into the TabPanel and add a map to the panel, where I get this error:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'ROADMAP' of undefined;
  sencha-touch-debug.js:24840</p>
  </blockquote>
  <p>I've already tried to change the mapType to google.map.MapTypeID like mentioned in the Google Map API V3, no success there.</p>
  <p>I just can't get the hang on it, hope you can give me some hints!</p>
  <p>The App:</p>
  <pre><code>NPApp = new Ext.Application({
      name: &quot;NPApp&quot;,
      title: &quot;NextPuff&quot;,
      icon: 'images/icon.png',
      tabletStartupScreen: 'images/index_default.jpg',
      phoneStartupScreen: 'images/index_default.jpg',
      
      launch: function() {
          this.views.viewport = new this.views.Viewport();
          this.views.homecard = this.views.viewport.getComponent('navi');
      }
  
  });
  </code></pre>
  <p>The Viewport:</p>
  <pre><code>NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
      fullscreen: true,
      store: NPApp.npstore,
  
  
      initComponent: function() {
  
  
          Ext.apply(this, {
              tabBar: {
                  dock: 'bottom',
                  layout: {
                      pack: 'center'
                  }
              },
              items: [
                  { xtype: 'homecard', stretch: true},
                  { xtype: 'searchcard', id: 'navi' },
          { xtype: 'mapcard' },
                  { xtype: 'morecard' }
              ]
          });
          NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
      }
  });
  </code></pre>
  <p>The Mapcard:</p>
  <pre><code>NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
      title: &quot;Map&quot;,
      iconCls: &quot;map&quot;,
  
  
      initComponent: function() {
          var npMap = new Ext.Map({
              title: 'Map',
              useCurrentLocation: true,
              listeners: {
                  centerchange : function(comp, map){
                  //    refreshMap(map);
                  }
             },
              mapOptions : {
                  mapTypeControl : false,
                  navigationControl : false,
                  streetViewControl : false,
                  backgroundColor: 'transparent',
                  disableDoubleClickZoom: true,
                  zoom: 17,
                  draggable: false,
                  keyboardShortcuts: false,
                  scrollwheel: false
             }
          });
          Ext.apply(this, {
              defaults: {
                  styleHtmlContent: true
              },
                  items: [npMap]
          });
          NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
      }
  });
  
  
  Ext.reg('mapcard', NPApp.views.Mapcard);
  </code></pre>
  <p>Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1</p>