Sencha Touch入门-优快云博客

本文链接：https://blog.youkuaiyun.com/longlongago2000/article/details/6447569

本文介绍了Sencha Touch的基础使用流程，包括环境配置、HTML与JavaScript文件创建等。通过GeoTweets应用实例，展示了如何利用地理定位获取附近推文，并在地图上展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天开始研究sencha，先是运行了一下sencha的example，感觉很棒。

准备开始学着做，但无奈新东西资料非常少，只好上官网看仅有的一些资料，先做个翻译，慢慢再进行理解。

原文：http://dev.sencha.com/deploy/touch/getting-started.html (83)

省略sencha介绍……

使用sencha的主要步骤

配置环境
新建HTML文件
新建JavaScript文件
测试程序
为产品更新程序
将程序放进产品里面

安装以下这几个步骤来使用sencha touch创建基于触摸驱动的JavaScript应用程序：

配置环境

下载sencha touch类库
确认你已经配置好开发环境
确定你已经正确安装和配置好开发服务器和产品网页服务器
清楚你的应用程序所用到的css文件名是什么。你会在你创建HTML文件的时候用到这个文件名

新建HTML文件

在你的编辑器中为你的应用程序创建HTML文件…

HTML文件中指定的链接如下：

sencha默认的css文件：ext-touch.css
本程序的css文件，如：mycss.css

新建JavaScript文件

测试程序

为产品更新程序

将程序放进产品里面

创建 GeoTweets 应该程序的具体步骤

这一部分将带你拓展上一部分创建sencha touch程序主要步骤的描述。这部分代码可以在sencha touch 发布包的/examples/guide子目录中找到。

GeoTweets程序展示了使用sencha touch来创建一个简单但又强大的程序是多么简单。这个程序包括：

使用地理定位从twitter找到附近的tweets
tweets显示在地图上，并且在标签上以卡片的形式显示列表视图
在用户切换卡片的时候使用特殊的动画效果

创建HTML文件

创建sencha touch程序的第一步就是创建HTML文件和该程序的CSS文件，并且加入sencha touch类库和该程序的JavaScript文件。

GeoTweets程序的HTML文件为index.html，代码如下：

 <!DOCTYPE html>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>GeoTweets</title>

	 <!-- Sencha Touch CSS -->
	 <link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">

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

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

 </head>
 <body> </body>
 </html>

创建JavaScript文件

创建了HTML文件之后，接下来要做的是创建JavaScript文件，这一部分显示了整个的JavaScript文件内容，后面将分步地把创建的程序进行分析。

GeoTweets程序的JavaScript文件时index.js，内容如下：

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: '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, timeline]
        });

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

    }
});

 GeoTweets程序的HTML文件连接了五个文件：

sencha touch的默认css文件(text-touch.css)
自定义的css文件(guide.css)
Google Maps库(http://maps.google.com/maps/api/js?sensor=true (22)).
sencha touch库(在开发和测试的时候请使用debug版本, ext-touch-debug.js).
本程序的JavaScript文件(index.js).

注：该HTML的<body>标签内没有任何内容，因为sencha touch是通过JavaScript自动生成页面内容的。

未完待续……