Results 1 to 4 of 4

Thread: Layouts with contentEl

  1. #1

    Default Layouts with contentEl

    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.

    Thoughts?
    - Mark Lozano

  2. #2
    Sencha User
    Join Date
    Apr 2007
    Posts
    57

    Default

    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:

    Code:
     Ext.onReady(function () {
    
                new Ext.Viewport({ 
                        listeners: { afterlayout: function () { Ext.getBody().show() } },
                        layout: 'hbox', 
                        items: [{ contentEl: 'd1'}] })
            })
    HTML Code:
    <body style="visibility:hidden;">
        stuff here
        <div id="d1">
            other stuff</div>
    </body>

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

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

  4. #4

    Default

    Sweet, thanks for the responses.
    - Mark Lozano

Similar Threads

  1. contentEl
    By rvent in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 6 Mar 2009, 2:38 PM
  2. What is el: (compared to contentEl:)
    By Pachat in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 4 Dec 2008, 8:07 AM
  3. TabPanel With the same contentEl: Possible?
    By bobot in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Aug 2008, 7:29 AM
  4. contentEl Question
    By archrajan in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 10 Mar 2008, 8:00 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •