senChaTouch GeoTweets

센차터치 getting-started에 나온 Tweet예제를 따라 만들어 보았습니다.

센차터치는 음 jquery와 비교해 보면 상당히 OOP적인 냄새가 나는 프레임웍같습니다.
편안한 사용을 위한 학습 진입장벽이 있지만 투자한 만큼 유용하게 사용할 수 있을것 같네요.
예제코드는 센차홈페이지에 잘 나와있으니 참고 하시면 되는데 map생성 옵션에 오타가 있으니 요건 주의 하세요.

// map생성
var map = new Ext.Map({
      title: "Map",
      useCurrentLocation:true, // 예제 코드가 getLocation이라고 되어 있음.
      mapOptions:{zoom:12}

css를 이용해 살짝 꾸며본 화면입니다.
refresh버튼은 왜 css적용이 안되는지 좀더 봐야 겠네요.

 

Ext.setup({
        tabletStartupScreen: "tablet_startup.png",
        phoneStartupScreen:"phone_startup.png",
        icon:"icon.png",
        glossOnIcon:false, 
        
        onReady:function(){
                
                // timeline component작성
                var timeline    =new Ext.Component({
                        title:"Timeline",
                        cls:"timeline",
                        scroll:"vertical",
                        tpl:[
                                '<tpl for=".">',
                                        '<div class="tweet">',
                                                '<div class="avatar"><img src="{profile_image_url}" /></div>',
                                                '<div class="tweet-content">',
                                                        '<h2>{form_user}</h2>',
                                                        '<p>{text}</p>',
                                                '</div>',
                                        '</div>',
                                '</tpl>'
                        ]
                });
                // timeline 생성 끝;
                
                console.info( 'timeline', timeline );
                
                // map생성
                var map = new Ext.Map({
                        title: "Map",
                        useCurrentLocation:true,
                        mapOptions:{zoom:12}
                });
                
                
                // tabpanel생성 
                var panel       =new Ext.TabPanel({
                        fullscreen:true,
                        cardSwitchAnimation:'slide',
                        items:[map, timeline]
                });
                
                
                
                // addMarker함수 선언 
                var addMarker   =function( tweet, position ) {
                        var marker      = new google.maps.Marker({map:map.map, position:position});
                        
                };
                
                var refresh     =function(){
                        
                        var coords      = map.geo.coords;
                        Ext.util.JSONP.request({ 
                                url:"http://search.twitter.com/search.json",
                                callbackKey:"callback",
                                params:{
                                        geocode: coords.latitude + "," + coords.longitude +","+"5mi",
                                        rpp:30
                                },
                                callback: function( data ){
                                        data    =data.results;
                                        // update the tweets in timeline
                                        timeline.update( data );
                                        console.info( 'tweet*data', data );
                                        // add points to the map
                                        for( var i=0, ln=data.length; i<ln; i++ ) {
                                        
                                                var tweet       = data[i];
                                                // tweet에 지오정보를 가지고 있다면
                                                if( tweet.geo && tweet.geo.coordinates ){
                                                        var position    = new google.maps.LatLng( tweet.geo.coordinates[0], tweet.geo.coordinates[1] );
                                                        //console.info( 'position', position );
                                                        addMarker( tweet, position );
                                                }
                                                
                                        }
                                        
                                }
                                
                        });
                        // json request끝 
                        
                        
                };  // refresh끝
                
                
                
                // map update와 refresh바인딩 
                map.geo.on( 'update', refresh );
                
                var tabBar      = panel.getTabBar();
                
                tabBar.addDocked({
                        
                        xtype:"button",
                        ui      :"mask",
                        iconCls:"refresh",
                        dock:"right",
                        stretch:false,
                        align:"center",
                        handler:refresh
                
                });
                
        }
        
});

ExtJS관련내용

ExtCore

2011/01/16 - Element

2011/01/16 - CompositeElement