Consistent UI rather than constant UI across platforms using sencha touch

I was wondering how do i create consistent UI across all the platform rather than constant UI. Here by consistent i mean UI should look native to that particular platform. For example a tab bar in iOS is at the bottom and has particular look and feel whereas tab bar in Android is at the top and has different look.

If i create tab bar in sencha it is by default at the bottom and provides a blue look and feel much similar to iOS, but it won't work for Android because with default look I will loose the Android app feel, it will be like iOS app inside Android. So how do i address this issue? Do i write if else conditions for all the platforms to layout components correctly and apply specific CSS or I can do it through theming and if yes to what extend i can do things using theming?? Note my aim is not only开发者_如何转开发 having different branding of components but also changing their positions/ orientations etc.

The answers of these kind of questions are must as these would decide whether we should adopt sencha as cross platform tool or not. I would be grateful if i can get any working example of this kind which runs on iPhone/iPad/Android phone/ Android Pads providing their platform specific UIs.

Thanks, Tarun.

---

You can use themes to get the native colors. Sencha touch comes with 4 css - android.css, apple.css, bb6.css and sencha-touch.css. If you are not satisfied with those you can make a custom one with sass and compass. On theming - http://vimeo.com/17879651

So if you are doing a web app then you should detect what kind of device is and send the appropriate css. If you are doing a phonegap like app then you can pack different css for each platform.

To get the native positions and orientations you can use sencha's profiles. Read all about them in this tutorial: http://www.sencha.com/learn/idiomatic-layouts-with-sencha-touch/ - Basically you check what type of device is and you save that to profile object, after you have if/else statements that check that object.

Here you can find some of the apps made with sencha touch - http://www.sencha.com/apps/