Sencha Touch 应用架构答案

【问题标题】：Sencha Touch application structureSencha Touch 应用架构
【发布时间】：2011-01-03 17:55:43
【问题描述】：

我是 Sencha Touch 的新手，我正在尝试制作一个简单的应用程序，它有一个登录表单，可以进行调用并将结果提取到列表中。

我的问题是，我应该如何创建应用程序的结构？它应该都在一个 .html 文件中吗？或者我应该为每个列表和登录页面设置不同的页面？如果是这样，我怎样才能将视图从一个页面更改到另一个页面并获得过渡效果？

【问题讨论】：

【解决方案1】：

实际上有一个生成器可用于生成规范的应用程序结构。从 Sencha 下载，进入 jsbuilder 目录，然后运行类似这样的命令：

./sencha.sh generate app MyApp path/to/myapp

此外，此幻灯片集演示了结构，尽管您可能需要挖掘更多关于事物在哪里的哲学：

以下是讨论中讨论的示例应用：

【讨论】：

我非常抱歉六个月前我在答案中提供的链接在我无法控制的网站上不再可用。该链接一度是正确的。
嗨，比尔，如果您碰巧知道新链接可能在哪里，这对那些在该区域进行搜索的人会有所帮助。
对不起，我不为 Sencha 工作，而且幻灯片看起来并不容易找到。我相信这是 2010 年的煎茶会议。
只是在黑暗中的一次野刺，但您可能正在寻找这个：vimeo.com/17705448 另外，这是一个非常方便的会谈页面：vimeo.com/album/1494487
这是 Vimeo 视频 George 'Griffin 提到的幻灯片：slideshare.net/senchainc/…

【解决方案2】：

使用单个 HTML 文件开始工作很好，但从长远来看，值得让应用程序结构与“最佳实践”保持一致，以便其他人随后可以查看并理解您的代码。

Sencha Touch 生成器（在 v1.1 中推出）将启动逻辑放在一个名为 app.js 的文件中，然后为每个模型、视图和控制器（在各自的目录中）保存文件。

虽然您可能不是从一开始就构建成熟的 MVC 应用程序，但您可能仍应使用这些约定。看看 SDK 中的 Twitter 和 Kiva 应用程序（以及 http://dev.sencha.com/deploy/touch/examples/ ）寻找很好的例子。

index.html 文件可以单独链接到每个文件，但当然对于生产，您还建议查看 JSBuilder 工具将它们全部打包和缩小，以便设备可以在一个 HTTP 请求中获取它们。

【讨论】：

【解决方案3】：

我会按主要功能（即目的）分解它。对于移动应用，如果可以的话，您希望避免不必要的回发/加载多个页面和视图。

如果您的移动应用程序有一个目的，我会将其保留在一个 html 页面上，并且仅在您需要保持其井井有条时分解 JavaScript 文件。

如果它有两个目的（例如，1-输入一堆信息，2-显示数据报告），那么我会将它分成两个 html 文件。

例如，如果您有一个移动应用程序，它会引导您通过一系列向导步骤来执行数据输入（即单一目的），我会将整个向导放在 Ext.Panel 内（在一个页面上），并在用户完成向导时更换向导的每个内容 Ext.Panel “步骤”。

【讨论】：

【解决方案4】：

从最简单的事情开始，然后再重构。我刚刚在 Sencha Touch 中完成了一个应用程序，查看示例文件让我感到非常困惑。我发现最简单的学习方法是创建一个 html 文件，一旦有些东西变得笨拙或显然需要重构，我就开始创建后续文件。

【讨论】：