How to reuse content with Sencha Touch

Question

I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.

Take this example window:

Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?

What types of objects would you use? Does it make sense to use HTML div objects + CSS?

Also, does it make sense to use Sencha in this case?

Answer 1

Here is how you would achieve that layout using Sencha Touch:

Unfortunately it is pretty hard to explain, but hopefully it makes sense.

I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).

As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.

This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.

Answer 2

Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.

Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - @rdougan's associated demo on github may be more recent).

I did expand on the layout code contributed by @rdougan to add an example of how to implement the Reusable dataviews (gist).

That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.