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,498
    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,498
    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,498
    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.

  7. #7
    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


    Quote Originally Posted by Animal View Post
    You are using preexisting HTML from contentEl?
    Does that mean the concept of not showing the dynamic content of an inactive tab is not possible? i.e. I would have thought that only the tab graphic would need to be displayed if its inactive... except when clicked (active), in which case the whole panel associated with that tab would render?

    Quote Originally Posted by Animal View Post
    So that will be there anyway. You can't unrender it.
    Assume that is only the case if it's out side if the JS? i.e. in the div as in my example. Is there a way to have complex page data included within the JS? When I use a HTML : '<cfinclude template="my.cfm">' the page breaks.


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

      0  

    Default


    I don't understand what the problem is really, you're going to have to explain it again. "breaks"? How would YOU react if I told you MY page "breaks"?

    Inactive tab children are hidden. That's it.

  9. #9
    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


    Sorry, I can explain a little better.

    The page i'm including contains escape characters (as far as javascript is concerned). So in this example below, which is based on the API docs.. When the script is processed, I get "unterminated string literal" at the point when the CF include brings the complex content in. Interestingly, it also seems that tab 2 is being rendered even though it is not the first child, otherwise I would not see the error until i clicked on tab 2.

    <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: Ext.getBody(),
    activeTab: 0,
    items: [{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 2',
    html: '<cfinclude template="my.cfm">'
    }]
    });


    });

    </script>

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

      0  

    Default


    Of course you have to ensure that the Javascript code you generate to send to the browser is syntactically correct.

    You cannot have naked newline characters in string literals in most languages.

    You have to encode them.

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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi