PDA

View Full Version : dinamically adding controls / Hyperlink targetting iframe?



ljcorreia
Jun 06, 2008, 1:36 PM
Hi Coolite Team,

Thanks for the new version 0.5.
Excellent job, so far, so good !

The only bug I found so far was when adding Viewport, and let's say by mistake you forgot insert ScriptManager first. At the moment you drag & drop, it crashes and restart Visual Studio 2008.

I was trying to add some controls to a Panel, but I could not find the properly way to do so...
mypanel.ContentContainer.Controls.Add or .ContentControls.Add ?
Well, I end up figured out how to do, can you just confirm it is correct?

Working in the following code, trying to add a Repeater to the Panel on West, it simply doesn't show. This part is commented out, just to illustrate the issue.
I figured out how to to what I was expecting, but what I couldn't do was set the target to the iframe once it will be automatically generated when the property Frame is set to true. Then I swapped the Hyperlink for a LinkButton to try working with AutoLoad method, but it doesn't seems to work.

So, the question is: How can I work with link targetting to the iframe?



<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="True" Split="True">
<ext:Panel ID="Panel1" Title="" runat="server">
<Content>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="File" Value="File"></asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit"></asp:MenuItem>
<asp:MenuItem Text="View" Value="View"></asp:MenuItem>
<asp:MenuItem Text="Format" Value="Format"></asp:MenuItem>
<asp:MenuItem Text="Modules" Value="Modules"></asp:MenuItem>
<asp:MenuItem Text="Settings" Value="Settings"></asp:MenuItem>
<asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
<asp:MenuItem Text="Help" Value="Help"></asp:MenuItem>
</Items>
</asp:Menu>
<div id="subNavMenu">
<div id="logout">
<asp:LoginStatus ID="LoginStatus1" runat="server" />




</Content>
</ext:Panel>
</North>
<East Collapsible="true" Split="true">
<ext:Panel ID="Panel2" runat="server" Title="East" Width="175" Collapsed="True">
<Content>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Border="false" TabPosition="Bottom"
Title="Title">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1">
</ext:Tab>
<ext:Tab ID="Tab2" runat="server" Title="Tab 2">
</ext:Tab>
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</East>
<South Collapsible="true" Split="true">
<ext:Panel ID="PanelSouth" runat="server" Height="40" Title="">
<Content>

</Content>
</ext:Panel>
</South>
<West Collapsible="true" Split="true">
<ext:Panel ID="PanelWest" runat="server" Title="Product Explorer" Width="175">
<Content>
<ext:Accordion ID="Accordion1" runat="server" Animate="true">
</ext:Accordion>
</Content>
</ext:Panel>
</West>
<Center Split="True" >
<ext:TabPanel runat="server" ActiveTab="0" Title="Center">
<Tabs>
<ext:Tab runat="server" ID="CenterFrame" Title="Main" Border="false" Closable="false" Frame="true">
</ext:Tab>
<ext:Tab runat="server" Title="Tab 2" Closable="true">
</ext:Tab>
</Tabs>
</ext:TabPanel>
</Center>
</ext:BorderLayout>
</Content>
</ext:ViewPort>






SiteMapDataSourceView siteMapView = (SiteMapDataSourceView)SiteMapDataSource1.GetView( string.Empty);
SiteMapNodeCollection nodes = ((SiteMapNodeCollection)(siteMapView.Select(DataSo urceSelectArguments.Empty)));
foreach (SiteMapNode smi in nodes)
{
Coolite.Ext.Web.Panel p = new Coolite.Ext.Web.Panel();
p.Title = smi.Title;
//p.ID = "pnl_" + smi.Title;
p.Border = false;
p.Collapsed = false;
p.Collapsible = true;
p.Icon = Coolite.Ext.Web.Icon.FolderGo;


foreach (SiteMapNode child in smi.ChildNodes)
{
HtmlGenericControl ul = new HtmlGenericControl("ul");
HtmlGenericControl li = new HtmlGenericControl("li");

//LinkButton link = new LinkButton();
HyperButton link = new HyperButton();
link.ID = "link_" + child.Key[0].ToString();
//link.Target = CenterFrame.;
//CenterFrame.AutoLoad = child.Url;
link.Text = child.Title;
//link.CommandArgument = child.Url;
//link.Click += new EventHandler(LinkButton1_Click);
li.Controls.Add(link);
ul.Controls.Add(li);
p.ContentContainer.Controls.Add(ul);
}
Accordion1.Items.Add(p);
}


Thank you.

Leonardo.

geoffrey.mcgill
Jun 06, 2008, 5:40 PM
Hi Leonardo,

We have reproduced the ViewPort crashing problem. It appears to be a bug within the Accordion Layout Designer. We're working on a fix right now.

I'll post a response to your other questions shortly.

ljcorreia
Jun 10, 2008, 6:46 AM
Hi,

I tested the new 0.51 version and seems that the VS2008 don't crash anymore. Well done.
I think you would like to know that.

Sorry to bother you, but I could not figured out how to address the iframe and I am basically stuck on it.
Is there a way to load the central div without iframe, using ext.ajax / innerHTML, etc?

Can you give me some clue, please.

Thanks.
Leonardo

geoffrey.mcgill
Jun 11, 2008, 3:16 AM
Here's a basic example demonstrating the client-side JavaScript required to update the body of a Panel (includes Tab, Panel, Window, etc).

http://sandbox.ext.net/Panel/UpdateContents.aspx

The samples does not demonstrate making an Ajax call, although I hope to post a sample or two demonstrating a remote webservice sometime this week. ExtJS Forums (http://www.sencha.com/forum/) and Documentation (http://www.sencha.com/docs/).

Hope this helps.

ljcorreia
Jun 11, 2008, 5:55 AM
Hi Geoffrey McGill,

Thanks for your answer. Despite your effort, unfortunatelly it does not help me too much.
I've done something similar, just to update the central-panel:



Ext.get("CenterFrame").load({
url: url,
scripts: true,
params: "param1=foo&amp;param2=bar",
text: "Loading ..."
});


What I need to load in the center is a proper page, with styles, casdading dropdow combos, etc. And I don't think it can be done without iframes. The problem is not just upload a panel. I need to target a Hyperlink to the iframe, but the iframe generated by Coolite Wiewport has no ID property. The reason I need to use iframe is well explained here:

http://extjs.com/learn/Tutorial:Using_Layouts_with_Ext_-_Part_1

I am using the Coolite TabControl at the central-panel and it renders an iframe only if I set Frame and AutoLoad property.
I tried to set the iframe id manually with no luck:


Ext.DomQuery.select('iframe')[0].id = 'myframe';

The other problem in your solution is that I don't want to user ext:button. And there is no Ext:Hyperlink, so I can't set Listeners.

Please, help me to solve this or I'll have to give up and come back to use native view port scripts and manually solve all layout problems. I really wish to use the new version that is much better, but I got stuck in this problem.

I am trying to use in a comercial product and we obviously are going to buy the Professional license as soon as it will be available. Said that, I know I can count with your comprehension I help me ASAP.

Thanks

Leonardo.

geoffrey.mcgill
Jun 11, 2008, 6:27 AM
The iframe we generate when you use set an the AutoLoad property with an external url is just a conveincence wrapper. Behind the scenes, if the AutoLoad Url is an external domain (i.e. starts with "http://"), we create a <iframe> tag, set the "src" property of the iframe and then set the .Html property of the Panel.

If you need some custom code for the iframe, just create whatever <iframe> wrapper you need and set the Html property, not the AutoLoad property. Take a look at the PanelBase.cs AutoLoad property (~line 79) for an example.

> The
other problem in your solution is that I don't want to user ext:button.
And there is no Ext:Hyperlink, so I can't set Listeners.

A listener (JavaScript event) can be added to any html/dom element on the page, whether that element is a Coolite/Ext element or not.

Example


Ext.get("yourHyperlinkID").on("click", function(){Ext.Msg.alert("Test")});

The "Frame" property creates a unique style (rounded corner + background-color) for the container. It has no relation to an "iframe" and is not required if you are setting the AutoLoad property.

ljcorreia
Jun 11, 2008, 7:37 AM
Hi Geoffrey McGill,

Thanks for you your quick answer. After I sent you the thread I managed to solve the problem:


<script language="javascript" type="text/javascript">

function loadPage(url)
{
//Ext.DomQuery.select('iframe')[0].id = 'myframe';
//Ext.DomQuery.select('iframe')[0].name = 'myframe';
Ext.DomQuery.select('iframe')[0].src = url;
}
</script>

Programatically inserting the hyperlink inside the Accordion, as I sent the code before, so this time I just changed:


link.NavigateUrl = "loadPage('" + child.Url.ToString().Replace("~/", "") + "')";

Thanks for clarifying to me all these functionalities.
I am not sure if I understood you, how to wrap the iframe and get a custom code, sorry.
Yes, I noticed that the iframe is rendered just when using http:// (external domain). The pages I am opening in the central are in the same domain, apart from the webservice that populates the cascading dropdown combos.

I'll try using the Html property, but I still don't know if I can load a page all in these property without getting errors like "invalid page state", etc. as I was getting when I tried before.

Ok, I'll download the source and have a look on it. Just see that the code comes with Community Edition.

Thanks.

ljcorreia
Jun 11, 2008, 12:49 PM
Hi Geoffrey McGill,

Thanks for all your help and patience.
I thought a project will worth more than words to explain what I am struggling with. So I created one and I'm sending it here attached.

I really appreciate if you could have a look:

1 - You can see on this project how I solve the iframe targeting. I really appreciate if you could explain what you are trying to say on how to load a page on the center panel. If there is another way how to do it.

2 - The problem I was experiencing with TabPanel, overflowing the CentralPanel bounds can be seen on this project. Note that it just happens on IE (Page11.aspx) and I don't know if I could use FitLayout on this scenario. On the old Coolite version, I solved this problem (http://forums.ext.net/showthread.php?postid=458.aspx) by putting some javascripts and manually monitoring OnResize.

Can you, please, lead me how to do this?

Thank you
Leonardo.

geoffrey.mcgill
Jun 15, 2008, 10:49 AM
Hi Leonardo,

I will be reviewing your sample project and working on this problem later today.

ljcorreia
Jun 16, 2008, 6:32 AM
Hi Geoffrey,


Thanks for your answer. Please, let me know if you have any problem getting into it or understanding what I said.


Last week I was investigating another issue which I'll post in another thread. Sorry I don't want overwhelm you guys, so I'll not post a different subject here. I just need to continue testing all scenarios before we buy the license which will certainly happen before we go live with this project.


I'll keep waiting for your answer.
Best regards.

Leonardo.

geoffrey.mcgill
Jun 16, 2008, 5:36 PM
Hi Leonardo,

As mentioned above, if you want to load another page into an iframe, but not use the .AutoLoad property, you can set the .Html property with a string built up with an <iframe> tag.

Example


Html="<iframe id='Panel1_IFrame' width='100%' height='100%' src='http://www.google.com/' frameborder='0'></iframe>">

I also narrowed down the width problem with the TabPanel inside of a <table>. There appears to be some kind of defect in the width calculations for the TabPanel when rendered inside a <table>, and only in IE. The problem only appears to occur with TabPanel. I'm working with the extjs dev team to try and find a solution.

The problem can be simplified down to a very basic sample.

Example


<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>TabPanel inside table</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<table>
<tr>
<td>
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Height="300">
<Tabs>
<ext:Tab runat="server" Title="Tab 1" />
<ext:Tab runat="server" Title="Tab 2" />
<ext:Tab runat="server" Title="Tab 3" />
</Tabs>
</ext:TabPanel>
</td>
</tr>
</table>
</form>
</body>
</html>

My best solution at the moment, is the obvious one, don't place a <ext:TabPanel> within a <table>. I'm hoping to find a better solution soon.

geoffrey.mcgill
Jun 16, 2008, 7:14 PM
Hi Leonardo,

Ok, I found out some information about the TabPanel stretching and I have a simple work-around that seems to solve the problem.

The following sample demonstrates a solution to setting the TabPanel width to "auto". Basically you need to define the following new Css class on your page (or linked in a global stylesheet).

Example


<style type="text/css">
.auto-width-tab-strip ul.x-tab-strip {
width: auto;
}
</style>

Then set the .Cls property of the TabPanel to that new Css class.

Example


<ext:TabPanel
ID="TabPanel1"
runat="server"
Cls="auto-width-tab-strip"
ActiveTab="0"
Height="300">

The following demonstrates the complete solution.

Example


<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>TabPanel inside table</title>
<style type="text/css">
.auto-width-tab-strip ul.x-tab-strip {
width: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<table style="width: 100%;">
<tr>
<td>
<ext:TabPanel
ID="TabPanel1"
runat="server"
Cls="auto-width-tab-strip"
ActiveTab="0"
Height="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
<ext:Tab ID="Tab3" runat="server" Title="Tab 3" />
</Tabs>
</ext:TabPanel>
</td>
</tr>
</table>
</form>
</body>
</html>

Hope this helps.

ljcorreia
Jun 17, 2008, 9:40 AM
Hi Geoffrey McGill

Thank you very much for your answer.
That's almost solve the problem that still remains on IE (I am using IE7). The problem now is just the window/body resizing. Seems that IE event for window resizing is quiet tricky with lots of differences from the other browsers.
If you resize the browser the layout doesn't adjust the table and If put your code inside a ViewPort on the central panel you will see if you collapse the west panel the same will happen.

That's why the workaround I am using at the moment is a combination of monitoring body resize, window resize and Ext resize with EventManager.
Somenthig like:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page22.aspx.cs" Inherits="TestWithCoolite_v05.Page22" %>


<!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>TabPanel inside table with my workaround</title>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/tabpanel.js" type="text/javascript"></script>
</head>
<body &#111;nresize="this.onResize();">
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<table style="width: 100%;">
<tr>
<td>
<ext:TabPanel ID="TabPanel1" runat="server" Cls="auto-width-tab-strip" ActiveTab="0"
Height="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
<ext:Tab ID="Tab3" runat="server" Title="Tab 3" />
</Tabs>
</ext:TabPanel>
<script type="text/javascript">
Ext.onReady(function(){
var frame_innerHeight = dw_Viewport.getWinHeight();
var frame_innerWidth = dw_Viewport.getWinWidth(); var _tabs = Ext.getCmp(MyTabPanel); // Get ClientID of our tab
var percentHeight = TabHeight / 100.0; //height
var percentWidth = TabWidth / 100.0; //height
var tabContainer = _tabs.getEl().parent(); //Get container div (tabpanel rendered to own container div, we can't see this container in designer markup because it autogenerate)
var parent = tabContainer.parent(); //Get true container (this container we can see in designer markup)
//var height = parent.getComputedHeight() * percentHeight; //calculate % in pixels
var height = frame_innerHeight * percentHeight; //calculate % in pixels

var width = frame_innerWidth * percentWidth; //calculate % in pixels

tabContainer.setHeight(height); //set height for autogenarate conatiner div
_tabs.setHeight(height); //set height for TabPanel

tabContainer.setWidth(width); //set height for autogenarate conatiner div
_tabs.setWidth(width); //set height for TabPanel

Ext.EventManager.onWindowResize(this.onResize, this);
});

</script>
</td>
</tr>
</table>
</form>
</body>
</html>




using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;


namespace TestWithCoolite_v05
{
public partial class Page22 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.Page.ClientScript.IsClientScriptBlockRegist ered("MyScript"))
{
string script =
string.Format("var MyTabPanel = '{0}'; var TabHeight = {1}; var TabWidth = {2};", TabPanel1.ClientID,
60, 99);
this.Page.ClientScript.RegisterClientScriptBlock(t his.GetType(), "MyScript", script, true);
}
}
}
}


It is quite a messy, I agree.. but it was the only way I could get it working on both IE and FF.
You can see that I am using partially the Vladimir's solution to get the tab in percent.
There are two external scripts I am using and I am sending here attached.
Also, please note that need the body onresize to completely work.

The thing is even more messy if I tried to put this in my masterpage and do not load the scripts for the pages that I don't have tab. So I had to load the scripts on the code-behind.
And when using updatepanel there is one more tricky, because I had to allow scripting inside update panel for the first time.

So as you can see... My solution works, but I was expecting something more elegant/simple to use tabs in %.

Thanks for all your time. Pls, let me know if there is other simple workaround.

Leonardo.

geoffrey.mcgill
Jun 17, 2008, 10:24 AM
Hi Leonardo,

Thanks for the update.

I'm getting a lot of JavaScript errors when I try to run the sample you provided. Can you please confirm that if I copy/paste the sample you posted that it should work?

As well, if you could add everything to a single .aspx file (with no code-behind) that would help a lot.

ljcorreia
Jun 17, 2008, 12:00 PM
Hi Geoffrey McGill

Yes, it should work, but I converted to a single aspx file. Please, make sure you put the javascript files I sent before in a folder js.

I tested running just the page and tested opening the page in a frame inside the central panel. That project I sent (http://forums.ext.net/showthread.php?postid=616.aspx) you with wiewport setting start.aspx as default.aspx should work with this page as the links are already on the sitemap.

I'll finish a complete project with all issues and I'll send you. Meanwhile, please let me know if you get any errors again.

I hope that helps, sorry for any inconvinience and thanks a lot for all your support.

Leonardo.



<%@ Page Language="C#" %>


<script runat="server">
void Page_Load(object sender, EventArgs e)
{
if (!this.Page.ClientScript.IsClientScriptBlockRegist ered("MyScript"))
{
string script =
string.Format("var MyTabPanel = '{0}'; var TabHeight = {1}; var TabWidth = {2};", TabPanel1.ClientID,
60, 99);
this.Page.ClientScript.RegisterClientScriptBlock(t his.GetType(), "MyScript", script, true);
}
}
</script>


<!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>TabPanel inside table with my workaround</title>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/tabpanel.js" type="text/javascript"></script>
</head>
<body &#111;nresize="this.onResize();">
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<table style="width: 100%;">
<tr>
<td>
<ext:TabPanel ID="TabPanel1" runat="server" Cls="auto-width-tab-strip" ActiveTab="0"
Height="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
<ext:Tab ID="Tab3" runat="server" Title="Tab 3" />
</Tabs>
</ext:TabPanel>
<script type="text/javascript">
Ext.onReady(function(){
var frame_innerHeight = dw_Viewport.getWinHeight();
var frame_innerWidth = dw_Viewport.getWinWidth(); var _tabs = Ext.getCmp(MyTabPanel); // Get ClientID of our tab
var percentHeight = TabHeight / 100.0; //height
var percentWidth = TabWidth / 100.0; //height
var tabContainer = _tabs.getEl().parent(); //Get container div (tabpanel rendered to own container div, we can't see this container in designer markup because it autogenerate)
var parent = tabContainer.parent(); //Get true container (this container we can see in designer markup)
//var height = parent.getComputedHeight() * percentHeight; //calculate % in pixels
var height = frame_innerHeight * percentHeight; //calculate % in pixels

var width = frame_innerWidth * percentWidth; //calculate % in pixels

tabContainer.setHeight(height); //set height for autogenarate conatiner div
_tabs.setHeight(height); //set height for TabPanel

tabContainer.setWidth(width); //set height for autogenarate conatiner div
_tabs.setWidth(width); //set height for TabPanel

Ext.EventManager.onWindowResize(this.onResize, this);
});

</script>
</td>
</tr>
</table>
</form>
</body>
</html>

geoffrey.mcgill
Jun 17, 2008, 12:18 PM
I'll give your sample another try, but in the mean time, I made a quick sample demonstrating monitoring the Resize of the Center Panel and setting the height/width.

Example


<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>TabPanel inside table inside ViewPort</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout runat="server">
<East Collapsible="true" Split="true">
<ext:Panel runat="server" Title="East" Width="175">
<Content>
<ext:FitLayout runat="server">
<ext:TabPanel runat="server" ActiveTab="0" Border="false" TabPosition="Bottom"
Title="Title">
<Tabs>
<ext:Tab runat="server" Title="Tab 1" />
<ext:Tab runat="server" Title="Tab 2" />
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</East>
<Center>
<ext:Panel ID="pnlCenter" runat="server" Title="Center">
<Content>
<table>
<tr>
<td>
<ext:TabPanel
ID="TabPanel1"
runat="server"
ActiveTab="0"
Height="300">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
<ext:Tab ID="Tab3" runat="server" Title="Tab 3" />
</Tabs>
</ext:TabPanel>
</td>
</tr>
</table></Content>
<Listeners>
<Resize
Handler="TabPanel1.setSize(this.getInnerWidth() - 6, this.getInnerHeight() - 5);"
Delay="50"
/>
</Listeners>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:ViewPort>
</form>
</body>
</html>

Regarding those extra JavaScript files you include in your samples, I would get rid of that junk, expecially dw_viewport.js. I think they're only going to cause problems. All that functionality is built into Ext and is much more reliable.

No matter how we solve this <table> with TabPanel resize issue, the best solution is always going to be to use a Layout control (or combination of) and let the Layout controls monitor positioning and resizing.

ljcorreia
Jun 17, 2008, 2:13 PM
Hi Geoffrey McGill,

Thanks for your sample page. I've seen it working. I'll try to implement this way in my project and let you know.

Yes, I agree with you about the junk script. The same way I am not happy with all the junk code I've done to workaround this. I hope get a solution to get rid of this. That's the whole point here. And the first thing I struggled with Coolite (my first thread on this forum) was this TabPanel in %. In some way it is also dependent of the other thread about using TabPanel v0.51. For sure is some stupid thing I am doing, but If I cannot use the new version I guess I also cannot use this solution you just sent. Am I wrong.?

Well let's see.. Thanks a lot for all this help... sorry if I am not clear enough sometimes and if my code is messy wasting your time.

Best regards

Leonardo.

ljcorreia
Jun 19, 2008, 1:58 PM
Hi Geoffrey McGill,

We are near to finish the main issues! :-)
I got rid of the tables. The current layout was not me who created and I wasn't happy with that anyway. So, I changed for div tags.

With that, I could finally see the TabPanel working in IE and FF without any extra junk script. Great, well done!

My concern now is with the Listeners. If you get the exactly http://forums.ext.net/showthread.php?136 sample I sent you yesterday[/url] about the RowCommand not been fired and put the listener you recommended here, it doesn't work. Doesn't fire the listener.



<Listeners>
<Resize Handler="TabPanel2.setSize(this.getInnerWidth() - 6, this.getInnerHeight() - 5);" Delay="50" />
</Listeners>


However it does work on the example you sent, indeed.
No matter if it is using tables or not. I also tested with UpdatePanel in your sample and seems to work.

So I have no clue what is the issue, but the Listener are not been fired.

As I said, to reproduce the problem, please use the sample you used to correct the RowCommand problem.

Thank you very much.

Leonardo.

geoffrey.mcgill
Jun 20, 2008, 7:18 AM
Hi Leonardo,

Ok, I've played with this problem for a while now and I have a complete solution working.

But... the root cause of all these resizing problems is from the use of <table>'s.

Ext includes a very sophisticated Layout engine that would handle all these resizing issues seamlessly, although a developer would really need to start at the beginning with a control like <ext:ViewPort>. Once you start adding <table>'s and dropping controls in, the layout engine runs into issues. But only with IE and only using <table>'s for layout.

The framework is flexible enough to work-around these problems, although in some cases might take a few hacks to get everything working in an IE <table> layout.

Using your sample as a base, none of these layout/resizing problems would happen in IE (or any other browser) if the <table>'s were replaced with 's. If you think you need a <table>, you probably don't. In most situations they can (and should) be completely removed. The <table> should not be used to position or layout elements on the page. Ideally a <table> should be used to display tabular data.

I'm attaching a couple new files in a .zip.

The first file uses your original code and incorporates three relatively simple work-arounds to get the nested <ext:TabPanel> to resize properly in IE in this multi nested <table> layout.

Please pay particular attention to the wrapper around the main <table>. I also set the WindowResize Listener in <ext:ScriptManager> to listen for the browser window to be resized. The wrapper is used by the WindowResize listener to get the new size of the browser window after it is resized.

I can describe the complete scenario as follows:
Problem #1: In Internet Explorer, the <ext:TabPanel> has problems on initial render/sizing if nested within <table>. As proposed in an earlier post, we set the .Cls property to "auto-width-tab-strip" to work around this problem. Now the <ext:TabPanel> renders to the correct width when the page loads.
Problem #2: If the browser window width is resized smaller, the <ext:TabPanel> does not resize accordingly. To work around this problem, we wrap the main <table> in a . Then we set a small script in the WindowResize listener. When the WindowResize listener fires, we set the width of the <ext:TabPanel> to the new width of the wrapper. Very simple work-around's, but all required. For some reason the <table> does not resize properly in this scenario in IE, and therefore everything runs into problems when trying to calculate the new width. By wrapping the <table> in a , the now resizes properly and we can get a new width.

NOTE: The samples attached will only work with the latest code in SVN. I added some new functionality while testing these samples and the the samples are now dependent on this new code. If you email me directly I can send back a .dll for you test with.

Throughout these threads I've proposed several work-arounds for <table> layout designs and depending on the situation will determine which solution is most appropriate. In the end, it's still going to be best to start with a layout container (such as <ext:ViewPort>) or avoid the use of <table>'s for structuring a layout.

The second file (DataSourceUpdate.aspx) renders the exact same page, with the exact same layout, with the exact same functionality, but I replaced the <table>'s with 's. This page does not require any work-arounds for resizing in IE and everything just works "out of the box".

Hope this helps.

ljcorreia
Jun 20, 2008, 10:59 AM
Hi Geoffrey,

I could see what you have done, and I am impressed with your hability to find the tidy/correct solution. I meant all this Listeners, Resize on ScriptManager, etc. It is good to know, because I didn't know that Listeners also works with ScriptManager. Fantastic, well done guys. Your team have been doing a marvilous job.

When I sent you the thread yesterday, as I told you, after replace the tables for divs I could see the width working fine without any additional solution. So I was very happy with the width. So I went to try a solution for Height without using AutoHeight (I'll come back to this point to explain what I was trying to accomplish).

Continuing, while I was testing using Listeners on the Panel wrapping the TabPanel (exactly as this example you posted (http://forums.ext.net/showthread.php?postid=694.aspx)), I noticed that the listeners was not been fired (I put alert('') to test). At this stage I've had completely removed my Outter Tables (all parent tables wrapping my Coolite controls) and replaced them for divs.

That means, I agree with you about tables and I was no longer using them for layout. But my intention was telling you that the listeners was not working in some scenarios where I am still not completely sure. I think it is on that scenario using DataSourceID. Seems that you fixed the problem with DataSourceID and RowCommand event, but created a problem with your Listener.

Regarding to the new dll you sent me. Without changing one line of code, just by replacing dll's the Coolite Accordion collapse stopped working. So, please pay attention about this problem too.

Comming back to the point I was trying to accomplish. Again, using (this example you posted (http://forums.ext.net/showthread.php?postid=694.aspx)), it is near of what I was expecting, because the internal TabPanel is using the whole space in the center region and adjusting itself on resizing. The only difference is that I need to discount some pixels before because I always have something before the tabpanel.
So, My TabPanel would never go beyond the central region binds and if one specific tab need more height space it would be automatically overflowed thanks to the AutoScroll property.

That is why I was expecting to use Listeners, but unfortunately it is not working as I said.

Is it possible? Can you point me your opinion/solution for that?

Please, remember, we already agreed. No more tables to layout! :-)

Thank you very much.
Best Regards.

Leonardo.

geoffrey.mcgill
Jun 20, 2008, 2:36 PM
Hi Leonardo,

Thanks for the update. I'm happy to hear the resizing the TabPanel and browser window is working for you now.

I modified the "_New" sample to include the firing of a few custom client-side events and everything appears to be working properly.

http://sandbox.ext.net/UpdatePanel/DataSourceUpdate_New.aspx

As you can see I wrapped the <ext:TabPanel> in a new <ext:Panel> with and <ext:AccordionLayout>. Each of the Panels in the Accordion Layout appear to be collapsing/expanding properly. If you collapse/expand the "Parent Panel" you should see an pop-up message notifying you of the event.

As always, if you have a specific scenario which is not working for you, please post a code sample demonstrating. We try our best to interpret based on a description of the problem, although a code sample always help narrow down the problem and ensures we're all discussing the same thing.

geoffrey.mcgill
Jun 20, 2008, 2:50 PM
I added a Listener to the TabChange event on the TabPanel. Now you should get an alert whenever the ActiveTab is changed on the TabPanel.

http://sandbox.ext.net/UpdatePanel/DataSourceUpdate_New.aspx

I also forgot to attach the sample to my previous post, but it is included with this post.

Hope this helps.