View Full Version : Layouts with contentEl

1 Jul 2010, 9:07 AM
I am putting some pages together using the Viewport class. And I'm building most of the content dynamically (from menus to buttons to iframe panels that point to other pages). However I do have some content that is rendered immediately (either static content in the body or jsp/jsf generated content in the body). I place these bits in panels in the layout using the contentEl config option and ultimately things look fine.

However, the problem is that the static and jsp/jsf-rendered content is visible before the Ext script creates the viewport that puts each of those pieces in their correct place in the layout. Consequently, when you hit the page in the browswer, you see all these ugly bits of content for a while first, THEN the layout manager takes over and moves them into their proper place.

Is there a trick to not having anything in the page body show up until the layout manager has had the chance to place everything? I'd rather not have to code in styles (one by one on all of the generated content) that hide the content with css only to have to remove those styles after the layout has done its thing.


1 Jul 2010, 9:55 PM
Here's a possibility:

1.) Add a visibility:hidden style to the body tag.
2.) Display the body when the afterrender event fires on the viewport.

Here's an example:

Ext.onReady(function () {

new Ext.Viewport({
listeners: { afterlayout: function () { Ext.getBody().show() } },
layout: 'hbox',
items: [{ contentEl: 'd1'}] })

<body style="visibility:hidden;">
stuff here
<div id="d1">
other stuff</div>

1 Jul 2010, 10:58 PM
There is a much easier solution:

<div id="d1" class="x-hidden">My Content</div>
(Panel will remove the x-hidden class when it is used as a contentEl)

2 Jul 2010, 9:18 AM
Sweet, thanks for the responses.