PDA

View Full Version : 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>

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

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


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.

MrSparks
18 Jul 2010, 2:43 AM
Thanks for the quick reply!

Ok, so Iíll need to think about the newline issue and see if its going to be restrictive moving forward. but..... back to the original proof of concept, tabs & rendering.

I'm my previous example, I've now altered the CF include page just to bring back some text. I can see however that the CF page is being processed even though tab 2 is set as hidden : true.

I would expect the CF on tab 2 to be inactive until clicked? Do i need to add anything else to the code to make this work?

Many thanks

MrSparks
18 Jul 2010, 3:19 AM
Update :


I've replaced HTML with an "autoLoad" and this seems to only render the panel on tab 2 when its clicked. That method also gets around the new line and escape char issue... Hurray!



Is "autoLoad" the best option performance and scalability wise?

Animal
18 Jul 2010, 3:56 AM
It's OK if you really think that using HTML is good.

I wouldn't use HTML though whether as a contentEl, or as an html config, or autoLoaded.

You should generate the UI through Ext completely.

MrSparks
18 Jul 2010, 4:21 AM
In an ideal world Iíd like to spend some time learning EXT JS. However I need to be a little practical in my approach (short - mid term). I currently have many many years experience on CF and HTML and only 3 days experience on EXT JS :o)

The plan is to use EXT JS for the UI framework and CF/HTML/AJAX to deliver the content within the EXT JS UI.

With that in mind, would you say autoload was the best method over all for delivering dynamic content into TabPanels? Performance and scalability are my main concern at this stage.

Thanks again.
Sparky.

Condor
18 Jul 2010, 5:53 AM
Keep in mind that autoLoad is only meant for HTML fragments (no HEAD, BODY or LINK tags) and as little javascript as possible.

If you need to load entire pages then you should use IFRAMEs.

MrSparks
18 Jul 2010, 2:03 PM
Animal - Condor, thank you for all your help this weekend.

I'm now able to move the proof of concept work forward using EXT JS for the UI framework and ManagedIFrame for dynamic content.

For reference to anyone else who might come across this thread: ManagedIFrame is a 3rd party JS, available from http://code.google.com/p/managediframe/

A simple ManagedIFrame example can be found here
http://www.sencha.com/learn/ManageIframe:Examples:examples_MIFP

Sparky :)

timy
2 Oct 2010, 12:55 AM
Hi,

I am new to EXT JS.I was trying to load a page using autoLoad.But I tried with the previous link.I dont have much idea about iframes with tab panel.
Then I want to an add button in the tab panel to add tabs which has a fixed position and to save tabs based on user.Any one can help me?

Thanks,
T. U. K