Sencha Touch：这个框架到底是如何工作的？

Posted 2023-02-26

【中文标题】Sencha Touch：这个框架到底是如何工作的？

【英文标题】：Sencha Touch: How the heck does this framework work?

【发布时间】：2011-04-20 10:04:20

【问题描述】：

我正在做一场噩梦，试图用 Sencha Touch 构建任何有价值的东西。文档似乎是零散地描述了所有内容，而没有将所有内容都捆绑在一起。..

我的一个主要抱怨是我不明白任何东西是如何加载到浏览器中的。如果我只是在这个方法中的 index.js 中定义一个 Ext.List：

Ext.setup(
    onReady: function() 

    
)

然后那个 Ext.List 出于某种原因被加载到浏览器中。如果我在该方法中定义多个对象，它如何知道将哪个放入浏览器？此外，当我扩展 Ext.List 并将其放入上述方法时，什么也没有发生。这是怎么回事？

更好的是，我可以在哪里找到解释该框架如何工作的优秀文档？我仔细研究了 Sencha Touch 网站上的所有内容，包括教程，但所有内容都非常不完整。

【参考方案1】：

起初看起来确实令人困惑。重要的是要了解 Sencha Touch 与 jQTouch 或 jQuery Mobile 的不同之处在于，您以完全编程的方式创建界面，因为没有在 html 文件或类似文件中定义 UI。该框架更多地是按照经典小部件集的传统编写的，例如QT。这种风格不是传统的 Web 开发人员习惯的，但实际上我会说文档非常完整。它只是不是以 Web 开发人员熟悉的风格编写的。

它是这样工作的：一个组件需要设置一个属性fullscreen: true。此组件成为根，所有其他可见的 UI 组件都使用.add() 方法添加到此组件。 但是 所有 都在 javascript 中定义。这是要记住的最重要的事情。

您可能已经找到它，但主要的文档存储库是 API 文档 (here)。如果你要去任何地方，你将不得不习惯从这里阅读很多东西。这里的重要事实是 UI 中的所有内容都继承自 Component 类，而 Panel 可能是

当我开始时，我发现this 页面更适合开始。我特别推荐 Drew Neil 在面板上的出色屏幕投射。

我认为这与 Sencha Touch 仍然是一个年轻的库这一事实有很大关系，并且它源于高度编程和以 OO 为中心的Ext.js 框架。花一些时间真正学习 Ext.js 的基础知识从长远来看可能对尝试使用 Sencha Touch 有很大帮助（提示：Observable 是最重要的课程）。 p>

很抱歉，您说得对，文档不是很友好。但是，您从 Sencha Touch 获得的 UI 在移动界面方面仍然让竞争对手望而却步，所以我想说，如果您真的想要最流畅的移动 UI，它仍然是值得的。

【讨论】：

感谢您推荐我的screencast on panels。我还建议在layouts 上观看。我收集了越来越多的Sencha Touch screencasts，它们专注于框架中的各种概念和小部件。

啊，谢谢你，截屏为我节省了很多时间，帮助我更好地了解 S.T.

我也在寻找示例。是的，截屏视频非常有用！今年还有一本 Sencha Touch In Action 书。 http://manning.com/garcia2/

查看 Sencha Touch 下载提供的示例应用程序也很有帮助。其中一些非常简单，可为您提供良好的基本结构。

【参考方案2】：

我建议您查看会议视频http://www.sencha.com/conference/videos 特别是“构建您的 Sencha Touch 应用程序”，我按照视频中解释的 MVC 模式从头开始重新启动了一个应用程序，两天后我回到了以前的位置加上一个大量已修复的错误，但最重要的是，现在我真正了解了我在做什么，以及为什么在使用此标准模式之前很难让事情正常工作。

【讨论】：

会议视频真的很有用。尤其是你提到的那个。它真的为我解决了问题。

【参考方案3】：

我发现学习 sencha touch 的最佳场所之一是这个由 4 部分组成的关于构建简单 SenchaTouch1.0 应用程序的系列：- http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/ 跟进 MVC 示例： http://miamicoder.com/2011/writing-a-sencha-touch-mvc-application/ 完成上述教程后，您可以轻松自如地使用 SenchaTouch 自己的文档、教程和截屏视频。