Sencha example not working

hi i was try test sencha touch geotwitter but it doesnot seem to be working. ie display google map marker display each tweets as in the demo

i was also trying to add a 3rd tab to show the most popular tweets. how do i go about adding that?

i was following these demos 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);
    }


    });

---

One thing to consider is that you need to have your files hosted somewhere (remote server) in order for the map to have markers. Or if you have and android phone, you could connect to your computer and run the application, then you will be able to see all the markers, and the application will detect your location as well.

The other option is to install an iphone emulator on your machine and then point the emulator browser to your localhost where you have your project files.

Now in order to add a third tab, you will need to instantiate a new object of type tab... something like this:

var mostPopular = Ext.TabPanel{

  //put your logic here...
}

I am pretty new at this too. Here's a good video(s) tutorial(s) I found very, but very helpful

http://vimeo.com/22251762

---

I had this problem too, but it was easy to fix. in your html file you need to correct the file source. you have something like this I think.

  <!-- 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>

but you need to remove the slashes "/" from the sources. for example "/javascripts/geotweets.js" should be"javascripts/geotweets.js"