Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      0  

    Post TabPanel Dynamic Content - deferredRender?

    TabPanel Dynamic Content - deferredRender?


    Hi,

    I'm doing some proof on concepts to ensure that there are no scalability issues down the line.

    Essentially I have 5 tabs, all with dynamic content. Some of the tabs include an external page (.cfm page) which query a DB.

    Is there a way to control the tabs and how they render the content? i.e. I would only want the active tab to render content back to the browser. The other 4 tabs would remain content free until clicked.

    deferredRender seems like it might be on the right lines but on reading it doesn’t seem to fit my needs.

    Any ideas/suggestions?

    Many thanks
    Sparky

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why not? What have you read?

    deferredRender doesn't render hidden tabs.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      0  

    Default


    It was a post (you replied to, which I can't find now.) You were explaining to the poster that html will always get rendered. That’s HTML for you.

    I think what I’m trying to do is a little different but I took from it that deferredRender might be the wrong way to go....

    The tabs need to be visible to the end user. unless Hidden means something else in EXT JS?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Only one child item of a TabPanel is visible at once.

    And on first render the hidden ones will not be rendered.

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      0  

    Default


    Odd, i'm still seeing the CF include on tab 2 (example below) hitting the DB even though tab 2 not active.

    I think its becuase the CF include is in the DIV's and will just get rendered as the page is processed. I have tried putting the CF include inside the JS, however the content of the CF is quite complex and it breaks the page....

    Is there another option I could try?
    Many Thanks
    Sparky


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

    <style type="text/css">
    html, body
    {
    font:normal 12px verdana;
    }
    </style>

    <!--EXT JS LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <!-- EXT JS -->
    <script type="text/javascript" src="../ext-all.js"></script>
    <!-- EXT JS -->

    <!-- RSM Code -->
    <script type="text/javascript">

    // Initialization functions
    // Listener that ensures the page has loaded before it it rendered to the browser
    Ext.onReady(function()
    {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // viewable application area (the browser viewport)
    var viewport = new Ext.Viewport


    new Ext.TabPanel
    ({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:
    [
    {contentEl:'tab1', title:'Tab 1'},
    {contentEl:'tab2', title:'Tab 2', hidden : true}
    ]
    });


    });

    </script>
    </head>
    <body>

    <div id="my-tabs"></div>
    <div id="tab1" class="x-hide-display">Tab 1</div>
    <div id="tab2" class="x-hide-display"><cfinclude template="my.cfm"></div>

    </body>
    </html>

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You are using preexisting HTML from contentEl?

    So that will be there anyway. You can't unrender it.

    But why use any HTML. I ever use the stuff.

Similar Threads

  1. DeferredRender:false hiding the TabPanel content on a second call. Is it a bug?
    By Rammynampati in forum Ext 3.x: Help & Discussion
    Replies: 19
    Last Post: 9 Sep 2009, 1:59 AM
  2. Dynamic content in TabPanel
    By dekely in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 28 Dec 2008, 7:25 AM
  3. adding dynamic content to tabpanel
    By amoz in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 2 Jun 2008, 4:03 AM
  4. Dynamic content in TabPanel.
    By spidermanit in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Feb 2008, 1:50 AM

Thread Participants: 3