Sencha Touch 入门指导

amos_tl

浏览: 343518 次
性别:
来自: 长沙

最近访客更多访客>>

495127903

huanggua12353719

gaojingsong

我想与我思

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Javascript

EXT CSS Google Twitter jsonp

Sencha Touch 入门指导

1.
介绍Sencha Touch
     是一个JS框架.用于创建在基于触摸设备的WEB应用.它使用HTML, CSS来提供和本地应用一样效果的体验,而不需要插件.

2.
使用Sencha Touch
     下载
http://downloads.sencha.com/touch/sencha-touch-beta-0.96.zip

     创建HTML
     index.html
          引入CSS ext-touch-debug.css
          引入JS ext-touch-debug.js index.js
     部署到WEB SERVER
     测试页面 http://127.0.0.1/geotweets/index.html

3.
创建 GeoTweets 应用

index.html


<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>GeoTweets</title>

	 <!-- Sencha Touch CSS -->
	 <link rel="stylesheet" href="sencha-touch/resources/css/ext-touch-debug.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-touch/ext-touch-debug.js"></script>

	 <!-- Application JS -->
	 <script type="text/javascript" src="js/index.js"></script>
 </head>
 <body>
 
 </body>
 </html>

index.js

Ext.setup({
	tabletStartupScreen : 'images/tablet_startup.png',
	phoneStartupScreen : 'images/phone_startup.png',
	icon : 'images/icon.png',
	glossOnIcon : false,
	onReady : function() {
		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>{from_user}</h2>',
					'<p>{text}</p>', '</div>', '</div>', '</tpl>']
		});

		var map = new Ext.Map({
					title : 'Map',
					getLocation : true,
					mapOptions : {
						zoom : 12
					}
				});

		var panel = new Ext.TabPanel({
					fullscreen : true,
					animation : 'slide',
					items : [map]
				});

		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);

							// Add points to the map
							for (var i = 0, ln = data.length; i < ln; i++) {
								var tweet = data[i];

								// If the tweet is geo-tagged, use that to
								// display marker
								if (tweet.geo && tweet.geo.coordinates) {
									var position = new google.maps.LatLng(
											tweet.geo.coordinates[0],
											tweet.geo.coordinates[1]);
									addMarker(tweet, position);
								}
							}
						}
					});
		};

		// These are all Google Maps APIs
		var addMarker = function(tweet, position) {
			var marker = new google.maps.Marker({
						map : map.map,
						position : position
					});
		};

		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
				});

	}
});

4.
测试效果