如何使用Sencha Touch重用内容

Question

我想在Sencha中构建一个移动网站，在平板电脑设备上显示HTML内容，包含许多具有相似布局和属性的对象/部门/容器。

采用此示例窗口：

在Sencha Touch 2中编写这些容器是否有最佳实践或推荐的方法来实现可重用性和DRY？

您会使用哪些类型的物品？使用HTML div对象+ CSS是否有意义？

此外，在这种情况下使用Sencha是否有意义？

Answer 1

以下是使用Sencha Touch实现该布局的方法：

不幸的是，这很难解释，但希望它是有道理的。

我还创建了一个非常简单的布局示例，可在此处查看：http://www.senchafiddle.com/#jxiA8（确保按运行）。

关于哪些对象/组件;他们都是Ext.Containers。理想情况下，您将使用MVC结构为每个项创建自定义类（这将扩展Ext.Container）。

这绝对是Sencha Touch的一个很好的用例。它非常适合创建像这样的丰富应用程序。

Answer 2

渲染橙色和黄色容器中项目列表的最佳方法可能是使用DataView。

根据Ext.dataview.DataView component文章，依据itemTpl根据dive into dataview的官方文档或使用项呈示器绘制每个项目。 （请注意，该文章中的代码可能无法作为sencha使用，因为在不同的beta版本之间发生了很大的变化 - @rdougan's associated demo on github可能更新。）

我确实扩展了@rdougan提供的布局代码，以添加如何实现Reusable dataviews（gist）的示例。

该演示代码还包含一个快速解决的数据注入解决方案（applyStore和injectStore），因此可以定义一次“OrangeContainer”一次，并传递“突出显示”和“列表”的不同数据屏幕顶部和底部的视图版本。我不知道这是否是一个好的或可靠的方法。我对这方面的反馈感兴趣。