Sencha Touch 移动Web应用开发框架 V2.4.2 GPL开源版

Sencha Touch是一个高性能的HTML5移动应用程序框架，用户可以使用Sencha Touch在浏览器或混合shell中生成类似本机应用程序的体验；Sencha Touch提供了各种方便的数据进出应用程序的方法，所有数据绑定组件（如列表，嵌套列表和DataView）都使用存储，这些存储可轻松配置为将数据提取并保存到各种源；Sencha Touch针对构建跨多个平台的应用程序进行了优化；为了使编写应用程序尽可能简单，系统提供了一个简单但功能强大的应用程序架构，它利用了模型视图控制器（MVC）模式，这种方法可以使用户的代码保持干净，可测试且易于维护，并在编写应用程序时为您提供许多好处；强大又实用，需要的用户可以下载体验.

Sencha Touch 软件功能

Sencha Touch 2.2增加了对新工具和设备的支持，并允许您使用这些功能测量性能：

Sencha Cmd 3.1和Sencha Architect 2.2支持

Internet Explorer 10支持

Microsoft Surface Pro和Surface RT，Windows Phone和BlackBerry 10支持

图标字体支持

app.json中的平台检测，用于更改主题

平台配置选项可通过平台或主题更改设置

性能改进

sencha touch中文api最新版使用showfps网址选项衡量效果

实验支持FireFox 21，Opera Mobile，Chrome像素鼠标和触摸输入

用户界面更改

此外，还进行了大量的错误修复 - 请参阅发行说明。

Sencha Touch软件特色

Sencha Touch 2.2的以下改进提高了性能：

滚动指示符被重构和清理，以使用每个平台的最快的指示器

针对每个平台改进和优化可翻译类逻辑

ScrollPosition已更新为使用静态大尺寸，而不必动态测量，这提高了Android 2和Internet Explorer的性能 - 这被创建为一个100万像素的

块，以确保任何滚动组件

提高性能的统一动画队列 - 使用showfps选项 功能测量性能

更新了列表组件以提高性能

图表和数据存储的内存泄漏问题已修复

图表类型渲染器API被统一和清理，所有都遵循相同的模式。任何为图表API创建自定义设置的人可能需要相应地重做其代码

重构了pullToRefresh插件的性能和一致性

Sencha Touch使用说明

生成您的第一个应用程序现在您已经安装了Sencha Touch和Sencha Cmd，您可以生成一个应用程序。

选择或创建应用程序所在的目录，切换到该目录，然后发出以下命令：

哪里：

/path/to/touch 是解压缩Touch软件的目录。

MyApp 是您为应用程序提供的名称。

这将生成一个框架Sencha Touch应用程序，该应用程序命名空间到MyApp变量并位于当前目录中。

骨架应用程序包含创建Sencha Touch应用程序所需的所有文件，包括默认的index.html文件，Touch SDK的副本，CSS文件以及用于为应用程序创建本机程序包的图像和配置文件。

您可以通过在Web浏览器中打开应用程序来验证应用程序是否已成功生成。如果您将SDK解压缩到webroot文件夹，请导航至http://localhost/MyApp。如果您使用的是Sencha Cmd Web服务器，则可以使用http://localhost:1841/URL 访问提供的应用程序。

注意：如果此命令在Linux中失败，请将Sencha Cmd重新安装为普通用户，而不是使用root权限进行安装。

探索守则以下列表提供了每个文件和目录的简短描述：

app - 包含应用程序的模型，视图，控制器和商店的目录。

app.js - 应用程序的主要JavaScript入口点。

app.json - 应用程序的配置文件。

index.html - 应用的HTML文件。

packager.json - Sencha Cmd用于为应用程序创建本机程序包的配置文件。

resources - 包含CSS和应用程序图像的目录

app.js在编辑器中打开，作为应用程序的主要入口点。

该launch函数是应用程序的入口点。在默认应用程序中，隐藏应用程序加载指示器，并创建主视图的实例并将其添加到视口。

视口是[[touch：Ext.layout.Card卡布局]]，您可以在其中添加应用程序组件。默认应用程序将Main视图添加 到视口，以便在屏幕上显示。

查看主视图中的代码。

app/view/Main.js在代码编辑器中打开并将标题行更改为：

然后更改另一行，如下所示：

另外，更改行如下：

用以查看更改的效果。

创建您的第一个应用本指南可帮助您为移动设备创建第一个应用。

在开始之前，请确保您已安装Sencha Touch所需的所有相应软件。这些要求在“ 入门指南”中列出。

创建一个起始环境选择或创建应用程序所在的目录，切换到该目录，然后发出以下命令：

/ path / to / touch是您解压缩Touch软件的目录。

MyApp是您为应用程序提供的名称。

这将生成一个名为MyApp变量的起始Sencha Touch应用程序，该应用程序位于当前目录中。

启动应用程序包含创建Sencha Touch应用程序所需的所有文件，包括默认的index.html文件，Touch SDK的副本，CSS文件以及用于为应用程序创建本机程序包的图像和配置文件。

您可以通过在Web浏览器中打开应用程序来验证应用程序是否已成功生成。如果您将SDK解压缩到webroot文件夹，请导航至http://localhost/MyApp。如果您使用的是Sencha Cmd Web服务器，则可以使用http://localhost:1841/URL 访问提供的应用程序。

我们正在创造什么我们正在创建一个简单的移动网络应用程序，用于公司的移动网站。该应用程序包括一个主页，一个联系表单和一个简单的列表，可以获取Sencha最近的博客文章，并允许访问者在移动设备上阅读它们。

解压缩Sencha Touch后，可以app.js使用下面的示例替换文件中的代码。

注意：app.js文件中的起始内容包含您可以忽略的额外代码。

以下是一个交互式示例应用程序，您可以更改代码并预览结果：

入门由于应用程序使用包含四个页面的选项卡面板，因此我们首先创建UI。Sencha Touch的入口点是Ext.application的启动功能 。将此main视为应用程序的一部分，以及包含应用程序逻辑的位置。

#FormatImgID_0# 如果在浏览器中运行此代码（通过单击“预览”按钮）， 则会在屏幕顶部显示Ext.tab.Panel。由于主页可能更受欢迎，因此可以向其添加一些内容并重新定位页面底部的选项卡栏。默认情况下，标签栏位于页面顶部，但设置tabBarPosition 配置会将其移动到页面底部。然后我们将HTML添加到items数组中以创建内容。使用items数组将子项添加到容器中，如以下代码所示：

#FormatImgID_1# 您可以单击示例旁边的“预览”按钮来检查结果：您应该看到一些HTML内容，但它看起来不太好。我们 在面板中添加了一个cls配置，添加了一个我们可以定位的CSS类，使事情看起来更好。我们添加的CSS位于SDK下载中的examples / getting_started / resources / css / app.css文件中。以下是主页在这一点上的看法

添加博客页面现在我们有一个体面的主页，我们转到下一个屏幕。为了使每个页面的代码易于遵循，我们一次创建一个选项卡，然后在最后将它们组合在一起。

现在，我们删除第一个选项卡并将其替换为List。我们使用Google的 Feed API服务来获取Feed。因为涉及更多代码，首先我们看一下结果，然后我们解释如何完成它：

您可以单击示例代码上方的“代码编辑器”按钮以查看完整代码，但我们将逐个查看。此时，我们使用嵌套列表而不是面板，并使用 从sencha.com/blog获取的最新博客帖子填充列表。我们使用嵌套列表组件，以便我们可以通过点击列表在博客条目中向下钻取。

让我们从列表本身开始分解前面的代码

在前面的代码中，我们为嵌套列表提供了许多单行配置 - title，iconCls和displayField - 以及一个名为store的更详细的配置。Store配置告诉嵌套列表如何获取其数据。我们来检查每个商店配置：

type：tree - 创建NestedList使用的树存储。

fields - 告诉商店我们在博客数据中预期的字段（标题，内容，作者等）。

proxy - 告诉Store从何处获取其数据。

root - 告诉根节点它不是叶子。从代码的早期开始，我们将叶子的defaultValue设置为true，我们需要覆盖root的那个。

在所有商店配置中，代理正在做最重要的工作。我们告诉代理使用Google的Feed API服务 以JSON-P格式返回我们的博客数据。这允许我们从博客中获取Feed数据并在我们的应用中查看它（例如，尝试在上一个示例中交换http://rss.slashdot.org/Slashdot/slashdot的Sencha博客URL 以获取Slashdot的Feed）。

代理定义的最后一部分是Reader。读者是将Google的响应解码为有用数据的实体。当Google发回博客数据时，它们将其嵌套在JSON对象中，该对象看起来有点像下面的示例：

吃吧现在我们有了嵌套列表提取和显示数据，我们需要允许用户点击一个条目来读取它。要添加此功能，我们将另外两个配置添加到嵌套列表中，如下所示：

在此代码示例中，我们创建了一个detailCard，它是嵌套列表的一个有用功能，允许您在用户点击某个项目时显示不同的视图。我们将detailCard配置为可滚动的Panel ，使用styleHtmlContent使文本看起来很好。

最后一步是添加一个itemtap监听器，只要轻敲一个项目就会调用我们的函数。该函数将detailCard的HTML设置为您点击的帖子的内容。该框架将详细信息卡设置为视图以使帖子显示。这是我们为使博客阅读器工作而必须编写的唯一代码。

创建联系表单我们为我们的应用程序做的最后一件事是创建一个联系表单。我们获取用户的姓名，电子邮件地址和消息，并使用FieldSet使其看起来很好。该功能的代码如下：

这次我们创建一个包含fieldset的表单。该字段集包含三个字段 - 一个用于名称，一个用于电子邮件地址，另一个用于消息。我们使用[[touch：Ext.layout.VBox VBox布局]]在页面上垂直排列项目，一个在另一个之上。

在面板的底部，我们添加了一个带有tap 处理程序的Button。处理程序使用up方法，该方法返回包含按钮的表单面板。然后我们调用submit来提交表单，该表单将表单发送到指定的URL（'contact.php'）。

把它放在一起在单独创建每个视图后，让我们将它们整合到一个完整的应用程序中：