TabPanel Dynamic Content - deferredRender?

Printable View

Show 40 post(s) from this thread on one page

17 Jul 2010, 8:28 AM
MrSparks

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
17 Jul 2010, 9:21 AM
Animal

Why not? What have you read?

deferredRender doesn't render hidden tabs.
17 Jul 2010, 10:18 AM
MrSparks

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?
17 Jul 2010, 11:27 AM
Animal

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

And on first render the hidden ones will not be rendered.
17 Jul 2010, 1:56 PM
MrSparks

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>
17 Jul 2010, 2:38 PM
Animal

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.
17 Jul 2010, 4:01 PM
MrSparks

Quote:

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?

Quote:

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.
17 Jul 2010, 10:36 PM
Animal

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.
18 Jul 2010, 2:03 AM
MrSparks

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>
18 Jul 2010, 2:13 AM
Animal

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.

Show 40 post(s) from this thread on one page