Jan 21, 2010, 9:03 AM
[CLOSED] Reload a tab content in a center region IFrame
Hi
A problem that has troubled me for a while is with ability to reload tabs content.
For instance, please look the below sample extracted from Coolite samples and this thread.
All my problem lies in this bit here:
In my application, when I click on a Node for a TabPanel that has been loaded previously, it clears completly my iframe and just write "false" with no Firebug error, anything, any clue. Again, it is not what happens on this example here, but I am really struggling to reproduce here in this example.
A thing I noticed is in my "real world" scenario where the error happens is that I can prevent this problem happen if I use the URL as a ID for the Tab created. But that does not help me because I have different querystring which would open different tabs for the same page.
I suspect it is some issues with this bit:
I tested with loadIFrame & reload(), with same results.
Your help is much much appreciated.
Thanks
Leo
A problem that has troubled me for a while is with ability to reload tabs content.
For instance, please look the below sample extracted from Coolite samples and this thread.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>SiteMap - Coolite Toolkit Examples</title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
SiteMapNode siteNode = SiteMap.RootNode;
Coolite.Ext.Web.TreeNode root = this.CreateNode(siteNode);
TreePanel1.Root.Add(root);
}
//page tree node loader handler
protected void LoadPages(object sender, NodeLoadEventArgs e)
{
if (!string.IsNullOrEmpty(e.NodeID))
{
SiteMapNode siteMapNode = SiteMap.Provider.FindSiteMapNodeFromKey(e.NodeID);
SiteMapNodeCollection children = siteMapNode.ChildNodes;
if (children != null && children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
{
e.Nodes.Add(this.CreateNodeWithOutChildren(mapNode));
}
}
}
}
//dynamic node creation
private Coolite.Ext.Web.TreeNodeBase CreateNodeWithOutChildren(SiteMapNode siteMapNode)
{
Coolite.Ext.Web.TreeNodeBase treeNode;
if (siteMapNode.ChildNodes != null && siteMapNode.ChildNodes.Count>0)
{
treeNode = new Coolite.Ext.Web.AsyncTreeNode();
}
else
{
treeNode = new Coolite.Ext.Web.TreeNode();
treeNode.Leaf = true;
}
if (!string.IsNullOrEmpty(siteMapNode.Url))
{
treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);
}
treeNode.NodeID = siteMapNode.Key;
treeNode.Text = siteMapNode.Title;
treeNode.Qtip = siteMapNode.Description;
return treeNode;
}
//static node creation with children
private Coolite.Ext.Web.TreeNode CreateNode(SiteMapNode siteMapNode)
{
Coolite.Ext.Web.TreeNode treeNode = new Coolite.Ext.Web.TreeNode();
if (!string.IsNullOrEmpty(siteMapNode.Url))
{
treeNode.Href = this.Page.ResolveUrl(siteMapNode.Url);
}
treeNode.NodeID = siteMapNode.Key;
treeNode.Text = siteMapNode.Title;
treeNode.Qtip = siteMapNode.Description;
SiteMapNodeCollection children = siteMapNode.ChildNodes;
if (children != null && children.Count > 0)
{
foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
{
treeNode.Nodes.Add(this.CreateNode(mapNode));
}
}
return treeNode;
}
</script>
<script type="text/javascript">
var addTab = function (tbPanelName, tabName, id, url) {
var tabPanel = null;
if (window.parent.Ext != null) {
tabPanel = window.parent.Ext.getCmp(tbPanelName);
} else {
tabPanel = Ext.getCmp(tbPanelName);
}
var tab = tabPanel.getItem(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: tabName,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode: 'iframe',
maskMsg: 'Loading ' + tabName + '...'
},
listeners: {
update: {
fn: function(tab, cfg) {
cfg.iframe.setHeight(cfg.iframe.getSize().height - 20);
},
scope: this,
single: true
}
}
});
}
else {
tab.loadIFrame(url);
}
tabPanel.setActiveTab(tab);
//tab.loadIFrame(url);
}
var loadPage = function(tabPanel, node) {
var tab = tabPanel.getItem(node.id);
if (!tab) {
tab = tabPanel.add({
id: node.id,
title: node.text,
closable: true,
autoLoad: {
showMask: true,
url: node.attributes.href,
mode: 'iframe',
maskMsg: 'Loading ' + node.attributes.href + '...'
},
listeners: {
update: {
fn: function(tab, cfg) {
cfg.iframe.setHeight(cfg.iframe.getSize().height - 20);
},
scope: this,
single: true
}
}
});
}
else {
tab.loadIFrame(node.attributes.href);
}
tabPanel.setActiveTab(tab);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West>
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Title="Site Map - preloaded tree" Icon="ChartOrganisation">
<Listeners>
<%--<Click Handler="if(node.attributes.href){e.stopEvent();loadPage(#{Pages}, node);}" />--%>
<Click Handler="if(node.attributes.href){e.stopEvent();addTab(#{Pages}.id, node.text, node.text, node.attributes.href);}" />
</Listeners>
</ext:TreePanel>
</West>
<Center>
<ext:TabPanel ID="Pages" runat="server" EnableTabScroll="true">
</ext:TabPanel>
</Center>
<East Collapsible="true">
</East>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>
I am putting also a addTab function that is different from yours loadPage, but ignore if you want.All my problem lies in this bit here:
if (!tab)
{
...
}
else
{
tab.loadIFrame(url);
//tab.reload();
}
I can't really reproduce the exact same problem here, but I will give as much information as I can hoping you can help me.In my application, when I click on a Node for a TabPanel that has been loaded previously, it clears completly my iframe and just write "false" with no Firebug error, anything, any clue. Again, it is not what happens on this example here, but I am really struggling to reproduce here in this example.
A thing I noticed is in my "real world" scenario where the error happens is that I can prevent this problem happen if I use the URL as a ID for the Tab created. But that does not help me because I have different querystring which would open different tabs for the same page.
I suspect it is some issues with this bit:
tab = tabPanel.add({
id: node.id,
And I am just saying this because I noticed if I use the page url as id the problem does not happen.I tested with loadIFrame & reload(), with same results.
Your help is much much appreciated.
Thanks
Leo