TabPanel Dynamic Content - deferredRender?

**MrSparks** · 17 Jul 2010 8:28 AM

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

**Animal** · 17 Jul 2010 9:21 AM

Why not? What have you read?

deferredRender doesn't render hidden tabs.

**MrSparks** · 17 Jul 2010 10:18 AM

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?

**Animal** · 17 Jul 2010 11:27 AM

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

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

**MrSparks** · 17 Jul 2010 1:56 PM

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>


<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>



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



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

**Animal** · 17 Jul 2010 2:38 PM

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.

**MrSparks** · 17 Jul 2010 4:01 PM

Originally Posted by Animal

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?

Originally Posted by Animal

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.

**Animal** · 17 Jul 2010 10:36 PM

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.

**MrSparks** · 18 Jul 2010 2:03 AM

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>

**Animal** · 18 Jul 2010 2:13 AM

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.

TabPanel Dynamic Content - deferredRender?

Thread Tools

Search Thread

Display

TabPanel Dynamic Content - deferredRender?

TabPanel Dynamic Content - deferredRender?

Similar Threads

DeferredRender:false hiding the TabPanel content on a second call. Is it a bug?

Dynamic content in TabPanel

adding dynamic content to tabpanel

Dynamic content in TabPanel.