Пример Сенча не работает - PullRequest
Новая
       22

Пример Сенча не работает

0 голосов
/ 10 мая 2011

Привет, я попробовал проверить sencha touch geotwitter, но, похоже, он не работает.т.е. отображать маркер карты Google, отображать каждый твит, как в демоверсии

Я также пытался добавить третью вкладку, чтобы показать наиболее популярные твиты.как мне добавить это?

я следил за этими демонстрациями 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);
    }


    });

Ответы [ 2 ]

0 голосов
/ 31 марта 2012

У меня тоже была эта проблема, но ее было легко исправить. в вашем 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"

0 голосов
/ 20 мая 2011

Следует учитывать, что вам нужно разместить свои файлы где-нибудь (на удаленном сервере), чтобы на карте были маркеры. Или, если у вас есть телефон Android, вы можете подключиться к компьютеру и запустить приложение, тогда вы сможете увидеть все маркеры, и приложение также определит ваше местоположение.

Другой вариант - установить эмулятор iphone на свой компьютер, а затем направить браузер эмулятора на локальный хост, где у вас есть файлы проекта.

Теперь, чтобы добавить третью вкладку, вам нужно будет создать новый объект типа tab ... как то так: 

var mostPopular = Ext.TabPanel{

  //put your logic here...
}

Я тоже новичок в этом. Вот хороший учебник (и) видео, которые я нашел очень, но очень полезный

http://vimeo.com/22251762

...