I used Sencha Touch when it was originally released, but then went on to other projects. Now I want to build a desktop + mobile application, and am back again :-)

Basically, I like how Sencha adapts the UI between screen sizes. So with just one UI I can work with different devices. (This is fine for me since I have a very simple UI)

I reviewed (again) all options - Sencha, jQuery Mobile, Titanium, Phone Gap, Adobe AIR... Couldn't find a definitive answer that Sencha Touch will work with Titanium. That was my preferred option. Mainly because Titanium offers a lot more APIs and works on the desktop too. I found jQuery Mobile to be too slow and Phone Gap was only for mobile.

So if Sencha Touch worked with Titanium - both for desktop and mobile, I would be all set.

And it does.

Creating a desktop app like this was not a problem at all. I actually just sym-linked Titanium's Resources folder to Sencha Kitchen Sink app's resources folder (which contains the index.html) and it worked beautifully! I had to fix the sencha-touch.js and sencha-touch.css file paths, but overall this worked without a hassel.

Creating a mobile app was slightly different. Titanium recommends you use native apps for mobile and hence gives you an app.js file to begin with.

So I used that as a shell Titanium app. It creates a WebView and loads Sencha's index.html into it. Sencha takes over from here.

Here's the app.js code:
var win = Titanium.UI.createWindow({
var web_view = Titanium.UI.createWebView({
  url: 'index.html'
Again, I had to fix the sencha-touch.js, autotheme.js and sencha-touch.css paths.

And this worked fine as well!

The only glitch: data stores loading JSON via AJAX Proxy don't work. This is because local file access is not permitted from a WebView.

The workaround? I simply copied JSON data to another JS file. Created a EXT.JSONDATA object and pushed all JSON files as properties in this.

Ext.JSONDATA = {};
    Ext.JSONDATA.carregions = {
    "text": "Cars",
    "items": [{
        "text": "Asia",
        "items": [{
            "text": "Japan",
            "items": [{
                "text": "Acura",
                "leaf": true
                "text": "Honda",
                "leaf": true

Remember that I loaded the full Kitchen Sink to see if everything worked.

This was very exciting! And I thought I should post it here so anyone who's trying to do similar knows it can be done! And without much trouble!

As for performance: it did take a couple of seconds to load the app, but once it was loaded, it was just as fast as Kitchen Sink web app!