orientation change and css

[wellsbr01]

Hi,

I have some docked panels styled with some css classes and background images. How can I change the cls of a component upon a resize or orientation event?

Cheers,

[mrsunshine]

you can style you stuff based on the orientation the classes are

.x-landscape
and
.x-portrait

the class change depending on the orientation

if you need the current value in your js code you can access it with
Ext.Viewport.orientation

[wellsbr01]

I'm not following, could you ellaborate a bit?

Thanks!
W.

[mrsunshine]

take a look to your dom, depending on the orientation of your device the dom of your panel contains a class.
.x-landscape
or
.x-portrait

[wellsbr01]

Hum! Ok, got it!
So, if it is improper I can set the proper one or that's an internal setting?

[kortovos]

Does these classes get update automatically on orientation change?

[wellsbr01]

Yes, at least of a background image.

[kortovos]

I am not to concerned about a background image, but more about the size of panels and components.

[wellsbr01]

Yes, all dimensions change accordingly. Not only that, positioning of certain elements change too. For instance, a bottom indicator changes into a rightside indicator.

[kortovos]

Thanks for the advice. I will definitely try it out as soon as I am finished with my current assignment. Once I have experimented somewhat with it, I will post an example on this forum.

[irocker]

How can we specify different a background image for phone vs. tablet?

[RWaters]

How can we specify different a background image for phone vs. tablet?

There's a bunch of other helper classes that are applied.
.x-desktop
.x-ios
.x-andriod
.x-phone
.x-tablet