Sencha 示例不起作用

Question

您好，我尝试测试 sencha touch geotwitter，但它似乎不起作用。 即显示谷歌地图标记显示每条推文，如演示中一样，

我还尝试添加第三个选项卡以显示最受欢迎的推文。我该如何添加它？

我正在关注这些演示 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);
    }


    });

Answer 1

需要考虑的一件事是，您需要将文件托管在某个地方（远程服务器），以便地图具有标记。或者，如果您有 Android 手机，您可以连接到计算机并运行应用程序，然后您将能够看到所有标记，并且应用程序也会检测您的位置。

另一种选择是在您的计算机上安装 iphone 模拟器，然后将模拟器浏览器指向您拥有项目文件的本地主机。

现在，为了添加第三个选项卡，您需要实例化选项卡类型的新对象...
像这样的事情：

var mostPopular = Ext.TabPanel{

  //put your logic here...
}

我对此也很陌生。这是一个很好的视频教程，我发现非常有用

http://vimeo.com/22251762

Answer 2

我也遇到了这个问题，但很容易解决。
在您的 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”