谷歌地圖中的TabPanel

Question

我們能否在煎茶觸摸使用谷歌地圖中的TabPanel項..我想這個..

  title:'Map', 
      items:[    
       { 
        xtype:'map', 
        useCurrentLocation:true, 
       }, 

我添加了一個參考..

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

請讓我知道如何處理這個 在此先感謝。

Answer 1

是的。請參閱API文檔：http://docs.sencha.com/touch/2-1/#!/api/Ext.Map

只需將腳本標記添加到index.html頁面中，然後使用您顯示的代碼添加組件。

Answer 2

<style type="text/css"> 
      .tabGroup { 
     font: 10pt arial, verdana; 
     width: auto; 
     height: auto; 
    } 

    /* Configure the radio buttons to hide off screen */ 
    .tabGroup > input[type="radio"] { 
     position: absolute; 
     left:-100px; 
     top:-100px; 
    } 

    /* Configure labels to look like tabs */ 
    .tabGroup > input[type="radio"] + label { 
     /* inline-block such that the label can be given dimensions */ 
     display: inline-block; 

     /* A nice curved border around the tab */ 
     border: 1px solid #ddd; 
     border-radius: 5px 5px 0 0; 
     -moz-border-radius: 5px 5px 0 0; 
     -webkit-border-radius: 5px 5px 0 0; 

     /* the bottom border is handled by the tab content div */ 
     border-bottom: 0; 

     /* Padding around tab text */ 
     padding: 5px 10px; 

     /* Set the background color to default gray (non-selected tab) */ 
     background-color:#ddd; 
    } 

    /* Focused tabs need to be highlighted as such */ 
    .tabGroup > input[type="radio"]:focus + label { 
     border:1px solid #ddd; 
    } 

    /* Checked tabs must be white with the bottom border removed */ 
    .tabGroup > input[type="radio"]:checked + label { 
     background-color:white; 
     font-weight: bold; 
     border-bottom: 1px solid white; 
     margin-bottom: -1px; 
    } 

    /* The tab content must fill the widgets size and have a nice border */ 
    .tabGroup > div { 
     display: none; 
     height: 100%; 
    } 

    /* This matchs tabs displaying to thier associated radio inputs */ 
    .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { 
     display: block; 
    } 

     </style> 

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script> 
      var directionDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 
      var marker; 

      function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var directionend = new google.maps.LatLng(51.68830303062416, 5.312845717288155); 

      var mapOptions = { 
       zoom:15, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: directionend 
      } 


      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     marker = new google.maps.Marker({ 
       map:map, 
       draggable:true, 
       animation: google.maps.Animation.DROP, 
       position: directionend 
      }); 

      directionsDisplay.setMap(map); 
      } 

      function calcRoute() { 
      var start = document.getElementById('direction-from').value; 
      var end = document.getElementById('direction-end').value; 
      var request = { 
       origin:start, 
       destination:end, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
       } 
      }); 
      } 
     </script> 

    <div class="tabGroup"> 
     <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/> 
     <label for="rad1">Image Gallery</label> 

     <input type="radio" name="tabGroup1" id="rad2" class="tab2" onclick="initialize()"/> 
     <label for="rad2">Location Map</label> 

     <div class="tab1"> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
     <div class="tab2"> 
     <div id="map-canvas" style="width: 100%; height: 450px;"><p style="text-align:center; margin-top:50px;">Loading..</p></div> 
     <input type="hidden" name="direction_end" id="direction-end" value="Bangalore"> 
     <input type="text" name="direction_from" id="direction-from"> 
     <button id="get-direction" onclick="calcRoute()">Get Direction</button> 
     </div> 
    </div> 
    **<input type="radio" name="tabGroup1" id="rad2" class="tab2" onclick="initialize()"/>** this is very important line.thanks..