2011-05-10 101 views
0

嗨我試着測試sencha觸摸geotwitter,但它似乎沒有工作。 即顯示谷歌地圖標記顯示在演示中的每個推文Sencha示例不能正常工作

我還試圖添加第三個標籤來顯示最流行的推文。我如何去添加呢?

我是以下這些演示 http://dev.sencha.com/deploy/touch/getting-started.html

http://www.youtube.com/watch?v=YdRHPSbsIhc

// JavaScript Document 
Ext.setup ({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon:false, 
    onReady:function() { 

    var panel,timeline, mapPanel, mostPopular,tabBar, refresh; 

    timeline =new Ext.Component({ 
    title:"Timeline", 
    scroll:"vertical", 
    tpl:[ 
       '<tpl for=".">', 
       '<div class="tweet">', 
       '<div class="avatar"><img src="{profile_image_url}" /></div>', 
       '<div class="tweet-content">', 
       '<h2>{from_user}</h2>', 
       '<p>{text}</p>', 
       '</div>', 
       '</div>', 
       '</tpl>' 
     ] 


    }) 

    mapPanel = new Ext.Map({ 
    title:"Map", 
    geolocation:true 

    }); 

    mostPopular ={ 
    title:"MostPopular", 
    html:'Most Popular tweets' 

    } 

    panel = new Ext.TabPanel({ 
     fullscreen:true, 
     animation:'slide', 
     items:[mapPanel, timeline, mostPopular] 

    }); 

    refresh = function() { 
    var coords = mapPanel.geo.coords; 

     Ext.util.JSONP.request ({ 
     url:'http://search.twitter.com/search.json', 
     callbackKey: 'callback', 
     params: { 
      geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi', 
      q: "healthcare ", 
      rpp: 30 
     }, 
     callback:function(data){  
       var tweetlist = data.results; 
       timeline.update(tweetlist);//update the tweets in the timeline 

       // Add point to map by looping through tweets 
       for(var i=0, ln =tweetlist.length; i<ln; i++){ 
        var tweet =tweetlist[i]; 
        if(tweet.geo && tweet.geo.coordinates) { 
         addMarker(tweet); 
        } 
       } 

     } 
     }); 

     addMarker = function(tweet){ 
     var latlng = new google.maps.Latlng(tweet.geo.coordinates); 

     var marker = new google.maps.Marker ({ 
      map:mappanel.map, 
      position:latlng 

     }); 

     google.maps.event.addListener(marker,"click", function() { 
      tweetBubble.setContent(tweet.text); 
      tweetBubble.open(mapPanel.map, marker); 
     }); 
     }; 
     tweetbubble = new google.maps.InfoWindow(); 
     /*mock statis data var tweet= { 
      text:"hello world", 
      from_user:"nelstrom", 
      profile_image_url:"http://bit.ly/nelstrom-avatar" 
     }; 
     var tweetlist =[tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet, tweet] 
     timeline.update(tweetlist);// update the tweets in the timeline 
     */ 
    } 
    tabBar = panel.getTabBar(); 
     tabBar.addDocked ({ 
     dock:'right', 
     xtype:'button', 
     ui:'plain', 
     iconMask:true, 
     iconCls:'refresh', 
     align:'center', 
     handler:refresh 


     }); 

     mapPanel.geo.on('locationupdate',refresh); 
    } 


    }); 

回答

0

有一點要考慮的是,你需要有才能的地方(遠程服務器)主辦的地圖有標記的文件。或者,如果您有Android手機,則可以連接到您的計算機並運行該應用程序,然後您將能夠看到所有標記,並且應用程序也會檢測到您的位置。

另一種選擇是在你的機器上安裝一個iphone模擬器,然後將模擬器瀏覽器指向你的本地主機,你有你的項目文件。

現在,爲了添加第三個選項卡,您將需要實例化類型片的一個新的對象...... 是這樣的:

var mostPopular = Ext.TabPanel{ 

    //put your logic here... 
} 

我非常新,在這一點。這裏有一個很好的視頻(S)教程(S)我覺得很,但非常有幫助

http://vimeo.com/22251762

0

我也有這個問題,但它是很容易修復。 你的html文件中需要更正文件源。 你有這樣的想法。

<!-- Sencha Touch CSS --> 
    <link rel="stylesheet" href=" /sencha/sencha-touch.css" type="text/css"> 

    <!-- Custom CSS --> 
    <link rel="stylesheet" href=" /stylesheets/geotweets.css" type="text/css"> 

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

    <!-- Sencha Touch JS --> 
    <script type="text/javascript" src=" /sencha/sencha-touch.js"></script> 

    <!-- Application JS --> 
    <script type="text/javascript" src=" /javascripts/geotweets.js"></script> 

但您需要從源中刪除斜線「/」。例如「/javascripts/geotweets.js」應該是「javascripts/geotweets.js」