I’ve had some extra time over the last week, so I decided it was time to learn a bit more about Sencha Touch. All I needed to do was find a small project…
One of my favorite examples from the ExtJS demo collection is the forum browser, and it occurred to me that I haven’t seen this implemented using Sencha Touch. How hard could it be?
As it turns out… not that hard.
Take a look at my simple Sencha Forum browser – built with Sencha Touch! All of my source code is visible, so feel free to dig into my code and offer feedback.
What I Did (and Didn’t)
Building the forum browser was fairly straightforward. The application is wrapped inside a Panel() using a card layout. Toolbars are docked at the top for navigation.
The first thing you’ll notice is that the list of available forums isn’t complete. The ExtJS forum browser example (from which I stole many ideas) used a TreePanel() to display the forums. This tree was built with data returned from a PHP file – which meant that the data was formatted for use in an ExtJS Tree, not a Sencha Touch data store.
I got lazy and hard-coded a few of the forums just for the sake of example. Assuming I could get the Sencha team to create a new PHP file with the data formatted for a data store (not a tree), this list would be complete.
The second card in the layout, the Thread List, does call the same PHP file used in the ExtJS example. All I did was rewrite the ExtJS example using a Sencha Touch model/store, and then added some custom formatting to the List(). Nothing terribly exciting.
The last card in the layout is where a selected thread could be viewed. Looking at my example, you’ll see the words “not implemented”. This is a side effect of cross-domain scripting. I could use a ScriptTagProxy() to get the data from sencha.com/forum/ – except that there isn’t a page that returns the thread details formatted as JSON. I could have tried some other black magic to inject the HTML directly from the forum, but again I’m just lazy. You get the idea… and it’s not implemented in the ExtJS example anyways.
What’s Left?
I would like to get this demo fully-functional, so I may ask the Sencha team if they’d like to help me out on the PHP side. I would also like to add some cooler styling to this app – maybe have a Sencha logo at startup, etc. I need ideas – feel free to suggest some.
Note: The application doesn’t really look great on small screen resolutions (i.e. phones). It works… but definitely looks better on the desktop or iPad-ish devices.
About Arthur Kay 
