What's x-layout-inactive-content? (newbie question)

[benkooijman]

Hi,

I'm just starting with Ext (1.0 alpha version) and looking at the examples, I see

class="x-layout-inactive-content"

being used in the div tags.

Can anyone tell me what effect using this class is supposed to have and what other classes there are and what effect they have?

(basically, I'm just looking for guidance on when to use what).

Thanks,

Ben.

[JeffHowden]

Can be easily answered by looking at ext-all.css:

.x-layout-inactive-content{
    position:absolute;
    left:-10000px;
    top:-10000px;
    visibility:hidden;
}

Basically what that does is places the elements completely offscreen so they're not visible to the user.

[benkooijman]

Thanks for the really quick answer Jeff.

Forgive me, but now I'm really confused. Every single div tag in the "complex.html" example has this class, except for the parent "container" div.

Doesn't this mean then that all the panels etc. would be invisble? Yet, it works. I must be missing something here...

[JeffHowden]

If you aren't using it already, download and install Firefox. Then, download and install Firebug. With that, poke around the DOM after the page is rendered and you'll see that the elements with that class in the source have had that class swapped out for something else.

[brian.moeskau]

In general, this is done to ensure that the UI drawing is imperceptible to the user. Rather than starting everything off visible, then positioing everything dynamically while visible, all of the positioing is done offscreen. This (combined with the layout manager's internal processing flag) ensures that there's no perceptible flickering as things get moved around on render.

[benkooijman]

Ah, I get it.

Thanks for the comprehensive replies!

Ben.