Working with different device types and orientations?

[ddmorales]

I know there has already been some talk about this, but I couldn't find a good enough tutorial or sample.

Basically I would like to know what would be the best way to work with different devices (phone and tablet) and their current orientation in different situations. Some understanding and simple demo codes could not hurt any starting developers!


Devices
---------------------------
Phone (resolution 320 x 480 and less)
Tablet (resolution 1024x768 and more)

Or is this measured by viewport since iPhone4 has bigger resolution?


Orientation
---------------------------
Portrait
Landscape

If I understood correctly, sencha adds "x-landscape" and "x-portrait" to every element depending on which orientation you are in?


Situation one: Loading custom CSS files for different devices
---------------------------
Lets say I have a global.css, phone.css and tablet.css and I want to load the right css for the right device. What would be the easiest way? I assume I can use Sencha to do this?


Situation two: Changing layouts depending on orientation and device
---------------------------
If I have a panel with two docked items, how can I change their docking position according to the size and orientation the device?

for example if I have panels docked on the left and right, and I rotate my device and the orientation changes and the layout would be much better if the panels were docked on top of each other.

I found an article about this but as the author said, this has the same logic in two places: http://insideria.com/2010/11/making-orientation-aware-apps.html



I would gladly compile some demo codes and write a tutorial post if you experts would help me first. I have only been working with Sencha Touch for a while now but I'm blown away how much I could accomplish in such a short period. But I think there could be much better tutorials for beginners, and I would be happy to help other beginners on stuff I had problems with.

[Plastic]

I'm already trying to do something like this with sencha..
For the css class you could ever verify if a device is a Phone or not with the Ext.is.Phone method and apply a new css with the addCls method.
To modify layout on orientation and device change you could add an Ext.EventManager.onOrientationChange function that fires on any device rotation. In this function you can add/remove items from a container (remember to set AutoDestroy: false) or simply hide/show them. In addition to it in 1.0.1 version they add a layoutOnOrientationChange config option that call the layout manager everytime you change your device orientation.

Unfortunately still miss a tutorials for beginners about this.

[irocker]

Is it possible to change the background image when the orientation changes? I have a background image that I load with cls: but it's only for portrait right now.