Sencha Touch 入门指导

最新推荐文章于 2024-07-23 10:35:11 发布

amos_tl

最新推荐文章于 2024-07-23 10:35:11 发布

阅读量113

点赞数

分类专栏： Javascript 文章标签： EXT CSS Google Twitter jsonp

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

[b]Sencha Touch 入门指导[/b]

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

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

创建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

[img]http://dl.iteye.com/upload/attachment/329272/acc8da21-da75-3351-b066-912c5b222109.bmp[/img]

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.
测试效果

[img]http://dl.iteye.com/upload/attachment/329274/9b489420-84af-3738-b9ee-a088b8e3e7fd.bmp[/img]

5.
由于Twitter 网站国内被封, 无法访问.所以只能看到MAP.

amos_tl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sencha Touch 入门指导

[b]Sencha Touch 入门指导[/b]1.介绍Sencha Touch 是一个JS框架.用于创建在基于触摸设备的WEB应用.它使用HTML, CSS来提供和本地应用一样效果的体验,而不需要插件.2.使用Sencha Touch 下载[url=http://downloads.sencha.com/touch/sencha-touch-...
复制链接

扫一扫

专栏目录