So I have been playing around with this nice web toolkit for mobile platforms called Sencha Touch (the latest version, Touch 2 that’s in its Developer Preview 2 at the time of writing this blog post) during this month.

Coming from an ExtJs background, most things in Touch 2 came naturally to me. So it was only natural when I started using forms in Touch 2 to look out for DisplayField when I needed to show static content between other form fields. But to a bit of my surprise, it was nowhere to be found. The fact there was no Ext.form.Labelable mixin like we have in Ext 4 made me wonder how can I create a custom field with a Label. There’s an Ext.Label component available but it does not render with a “field label” even when used inside a form panel in Touch 2.

After some fiddling around, I thought to myself maybe we can use the base Ext.field.Field class in Touch 2 as our DisplayField itself. And when I tried, it worked as you can see in the following example:

 

Well some things are more painless than they appear initially. But then I have to say, Touch 2’s documentation needs major improvements and more comprehensive coverage of the hidden jewels in the toolkit (its currently not even in alpha, but only developer preview, so I won’t complain).