开始Sencha Touch 2之旅 -- Sencha Touch 官方指南系列

来源：互联网发布：淘宝改差评话术编辑：程序博客网时间：2024/06/06 17:33

Sencha Touch是什么?

Sencha Touch (以下简称ST)能够帮助你快速地构造出基于HTML5的手机应用。通过ST构造出来的程序有着与原生应用一致的用户体验，目前已全面支持Android、IOS、黑莓这些主流平台。

准备工作

您不需要太多的准备。只需要：

一个免费的Sencha Touch SDK。
一个本机的web服务器。
一个支持HTML5的浏览器(推荐使用Chrome和Safari)。

首先，下载最新的Sencha Touch SDK并解压至您的Web服务器根目录。如果您没有Web服务器，或者您不确定是否有，我们建议您安装一个简单的，如：WAMP和MAMP。

完成上述工作后，只需要用浏览器打开http://localhost/sencha-touch-folder，你就能看到ST的欢迎界面了。一切OK的话，我们就可以用ST来打造第一个应用程序了。

第一个程序

想让ST应用最高效地运行，请参照我们的示例进行开发。这是个约定，帮助我们写出易维护的程序，这在团队开发时尤其重要。

第一步，创建一个文件夹来存放您的应用程序。这里面你至少需要包含以下文件：

index.html - 一个简单的HTML文件，在里面引入ST框架以及您的应用程序文件。
app.js - 您的应用程序文件。定义您的主屏幕的图标和程序启动时所需要做的事情。
touch - ST框架文件的副本。

让我们先从index.html文件下手

<!DOCTYPE html><html><head>    <title>Getting Started</title>    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>    <script type="text/javascript" src="app.js"></script></head><body></body></html>

这大概是您这辈子所写过的最简单的HTML页面了。它仅仅引入了ST（框架的js文件和css文件）和您自己的app.js。注意，body标签的内容为空 - ST将会自动帮我们渲染它。接下来，让我们来看看app.js文件中的内容。我们仍然从最简单的例子入手，只是弹出一个警告对话框：

Ext.application({    name: 'Sencha',    launch: function() {        alert('launched');    }});

怎么样，简单吧。接下来让我们启动Safari(或者Chrome)，看看他是否如我们预期的一样。(或者点击代码左侧的眼睛图标来查看运行的效果)。

到目前为止，这个程序什么也干不了。但警报消息的弹出意味着ST已经正确地被加载并运行了。我们开始着手构建界面：一个TabPanel。TabPanel是一个标签式的界面，他允许你在多个页面之间浏览。在这里，我们只生成一个页面 - 主页(Home page):

Ext.application({    name: 'Sencha',    launch: function() {        Ext.create("Ext.TabPanel", {            fullscreen: true,            items: [                {                    title: 'Home',                    iconCls: 'home',                    html: 'Welcome'                }            ]        });    }});

现在，TabPanel已经显示在屏幕上了，但是我们的主页，内容可以更丰富一些。把标签放在顶部有点不大好看，主页按钮似乎也有些单调。让我们动手吧，修改tabBarPosition配置项并添加一些HTML内容:

Ext.application({    name: 'Sencha',    launch: function() {        Ext.create("Ext.TabPanel", {            fullscreen: true,            tabBarPosition: 'bottom',            items: [                {                    title: 'Home',                    iconCls: 'home',                    html: [                        '<img src="http://staging.sencha.com/img/sencha.png" />',                        '<h1>Welcome to Sencha Touch</h1>',                        "<p>You're creating the Getting Started app. This demonstrates how ",                        "to use tabs, lists and forms to create a simple app</p>",                        '<h2>Sencha Touch (2.0.0pr1)</h2>'                    ].join("")                }            ]        });    }});

到目前为止，我们已经有了一些HTML内容了，但不大好看（点击预览按钮查看代码示例）。为了使它更好看，我们只要给panel添加cls配置项即可。只是增加了一个CSS类，就搞定了。这里CSS是定义在examples/getting_started/app.css文件中的。添加了CSS之后，我们的主页就变成了这个样子：

Ext.application({    name: 'Sencha',    launch: function() {        Ext.create("Ext.TabPanel", {            fullscreen: true,            tabBarPosition: 'bottom',            items: [                {                    title: 'Home',                    iconCls: 'home',                    cls: 'home',                    html: [                        '<img src="http://staging.sencha.com/img/sencha.png" />',                        '<h1>Welcome to Sencha Touch</h1>',                        "<p>You're creating the Getting Started app. This demonstrates how ",                        "to use tabs, lists and forms to create a simple app</p>",                        '<h2>Sencha Touch (2.0.0pr1)</h2>'                    ].join("")                }            ]        });    }});

现在我们已经有了一个体面的主页，接下来我们稍微做一些扩展。我们希望在一个单独的选项卡显示我们的最新博客文章列表。我们先用虚拟的数据 - 在这里我选取了几个我最喜欢的来自http://sencha.com/blog的职位。关于List的代码我们写在"Home"选项卡下方。（点击预览按钮运行代码示例）

Ext.application({    name: 'Sencha',    launch: function() {        Ext.create("Ext.TabPanel", {            fullscreen: true,            tabBarPosition: 'bottom',            items: [                {                    title: 'Home',                    iconCls: 'home',                    cls: 'home',                    html: [                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',                        '<h1>Welcome to Sencha Touch</h1>',                        "<p>You're creating the Getting Started app. This demonstrates how ",                        "to use tabs, lists and forms to create a simple app</p>",                        '<h2>Sencha Touch (2.0.0pr1)</h2>'                    ].join("")                },                {                    xtype: 'list',                    title: 'Blog',                    iconCls: 'star',                    itemTpl: '{title}',                    store: {                        fields: ['title', 'url'],                        data: [                            {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},                            {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},                            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},                            {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}                        ]                    }                }            ]        }).setActiveItem(1);    }});

我们回头再来添加点击这些List项的逻辑。文章的最后，我们再来添加一个联系表格。我们的最后一个tab，包含的是一个FromPanel和一个FieldSet：

//We've added a third and final item to our tab panel - scroll down to see itExt.application({    name: 'Sencha',    launch: function() {        Ext.create("Ext.TabPanel", {            fullscreen: true,            tabBarPosition: 'bottom',            items: [                {                    title: 'Home',                    iconCls: 'home',                    cls: 'home',                    html: [                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',                        '<h1>Welcome to Sencha Touch</h1>',                        "<p>You're creating the Getting Started app. This demonstrates how ",                        "to use tabs, lists and forms to create a simple app</p>",                        '<h2>Sencha Touch (2.0.0pr1)</h2>'                    ].join("")                },                {                    xtype: 'list',                    title: 'Blog',                    iconCls: 'star',                    itemTpl: '{title}',                    store: {                        fields: ['title', 'url'],                        data: [                            {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},                            {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},                            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},                            {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}                        ]                    }                },                //this is the new item                {                    title: 'Contact',                    iconCls: 'user',                    xtype: 'formpanel',                    url: 'contact.php',                    layout: 'vbox',                    items: [                        {                            xtype: 'fieldset',                            title: 'Contact Us',                            instructions: '(email address is optional)',                            items: [                                {                                    xtype: 'textfield',                                    label: 'Name'                                },                                {                                    xtype: 'emailfield',                                    label: 'Email'                                },                                {                                    xtype: 'textareafield',                                    label: 'Message'                                }                            ]                        },                        {                            xtype: 'button',                            text: 'Send',                            ui: 'confirm',                            handler: function() {                                this.up('formpanel').submit();                            }                        }                    ]                }            ]        }).setActiveItem(2);    }});

在第三个tab中，我们添加了一个表格，其中包含三个字段和一个提交按钮。我们使用了VBOX布局布局来定位下方的提交按钮。fieldset本身配置了一个title 和一些 instructions(提示)。提示。最后，我们用了一个 textfield，一个emailfield 还有一个 textareafield.

你可以在examples/getting_started文件夹下找到本示例的文章代码。

开始Sencha Touch 2之旅 -- Sencha Touch 官方指南系列

Sencha Touch是什么?

准备工作

第一个程序

更多内容