PDA

View Full Version : Help with resizing of TabPanel when Parent panel is resized



stevenoc
Jun 02, 2008, 10:21 AM
Hi folks,

Coolite Control Version: 0.5.0.1666

Given the following:

a.) BorderLayout with two sections (center and east).
b.) East section contains "collapsible=true"
c.) Center section contains a TabPanel (built via code behind)

How would I go about triggering the "resize" event of the TabPanel, when the Center section is resized, when the User collapses / expands the East section?




<%@ 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">


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}


protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);


this.BuildZonePanel();
}

/// <summary>
///
/// </summary>
/// <param name="zoneId"></param>
protected void BuildZonePanel()
{
// Tab Panel to be added to the Placeholder control
Coolite.Ext.Web.TabPanel subZonePanel = new Coolite.Ext.Web.TabPanel();


// Tab variable (which is to be added to the Tab Panel for each and every zone in a datasource)
Coolite.Ext.Web.Tab subZoneTab;


// Properties specific to the Tab Panel
subZonePanel.Height = Unit.Pixel(1);
//zonePanel.Width = Unit.Pixel(400);
subZonePanel.EnableTabScroll = true;
subZonePanel.AutoPostBack = true;
subZonePanel.CausesValidation = false;

for (int i = 0; i < 30; i++)
{
// Reinitialise Tab Variable
subZoneTab = new Coolite.Ext.Web.Tab();


// Set specific properties for the Tabs
subZoneTab.Title = "Zone " + Convert.ToString(i);
subZoneTab.ToolTip = "Zone " + Convert.ToString(i); // I set the tooltip, even tho when one hovers over the tab the user is not show anything.


// Need to create an Attribute for the "ZoneId"
subZoneTab.Attributes.Add("zoneId", Convert.ToString(i));


// Add the Tab to the Panel
subZonePanel.Items.Add(subZoneTab);
}


// Add TabPanel to the Center Panel
this.CenterPanel.Items.Add(subZonePanel);
}
</script>


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<ext:ScriptManager ID="extScriptManager" runat="server" />
<form id="form1" runat="server">

<ext:Panel ID="Panel1" runat="server" Height="300" >
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<center>
<ext:Panel ID="CenterPanel" runat="server" Title="Center">
<content>
</content>
<Listeners>
<Resize Handler="centerPanelResize(el, adjWidth, adjHeight, rawHeight, rawWidth);"/>
</Listeners>
</ext:Panel></center>
<east collapsible="true" split="true">
<ext:Panel ID="EastPanel" runat="server" Title="East" Width="175">
<Content>
</Content>
</ext:Panel>
</east>
</ext:BorderLayout>
</Content>
</ext:Panel>


</form>
</body>
</html>


<script language="javascript">
/*
*
*/
function centerPanelResize(el, adjWidth, adjHeight, rawHeight, rawWidth) {
//
}
</script>



Regards
Steven

stevenoc
Jun 02, 2008, 11:29 AM
My mistake.

I forgot that I needed to enclose the TabPanel within a FitLayout.

Steven

geoffrey.mcgill
Jun 02, 2008, 3:35 PM
Hi Steven,

Adding any Panel container (including TabPanel) into a FitLayout will cause the Panel to completely fill the Parent container Height &amp; Width 100%.

With the latest version 0.5 build we introduced a new feature for the <Listeners> which may/will cause a breaking change in previous code.

The Handler property now automatically wraps it's value in the proper JavaScript 'function' syntax and will automatically setup and pass the proper event arguments for each event. Now you only need to write the logic for the function and do not need to worry about wrapping with the "function(){ /* LOGIC */ }" syntax.

Example


// Old
<Resize Handler="function(el){console.log(el.getSize());}" />

// New
<Resize Handler="console.log(el.getSize());" />


If you still wish to provide a full function or a pointer to a custom function somewhere else on the page, please use the new .Fn property.

Example


<Resize Fn="function(el){console.log(el.getSize());}" />

<Resize Fn="myCustomFunction" />

In the sample above, the "myCustomFunction" will be called/fired when the Resize event is triggered. The standard event arguments for each event will be passed to myCustomFunction.

The following sample demonstrates how to add a Resize Listener to the <Center> Panel. Anytime the Split bar is moved/resized, the <Center> Panel Resize event will be fired.

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>Panel in BorderLayout with Resize Handler</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext: Panel
ID="Panel1"
runat="server"
Title="Title"
Height="500px"
Width="800px">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<Center>
<ext: Panel runat="server" Title="Center">
<Listeners>
<Resize Handler="console.log(el.getSize());" />
</Listeners>
</ext: Panel>
</Center>
<East Collapsible="True" Split="True">
<ext: Panel runat="server" Title="East" Width="175px" />
</East>
</ext:BorderLayout>
</Content>
</ext: Panel>
</form>
</body>
</html>

Hope this helps.

stevenoc
Jun 04, 2008, 9:26 AM
Hi Geoffrey,

Thanks for the update.

I've modified my example slightly. Instead of adding the Tab Panel directly to the page, I've added it to a user control which I then place within the <content> section of the panel.

If a place a FitLayout control in either of the following:
a.) User control
b.) Within the <Center> content, so that it wraps the user control (within another panel)

If I then proceed to test / run the website and I collapse either the west region the following happens:
a.) Collapse West Region:
i.) Right Arrow indicator (TabPanel) moves to its "new" position (which is correct)
ii.) Tab Width remains at its original width.
1.) If I "click" on any Tab (forcing a postback), the TabPanel is recreated and fills the complete width.

b.) Expand West Region:
i.) Right Arrow indicator (TabPanel) does not move.
1.) Need to "click" on a Tab to reset its width as well as to reset the "Right Arrow Indicator".

My question is as follows:
On the resize of the parent panel (center panel), is there any way I could force a redraw/resize of any and all child controls contained within?

Regards
Steven O'Connor

geoffrey.mcgill
Jun 04, 2008, 3:14 PM
Hi Steven,

Thanks for the sample. I was able to re-create the issue.

At the moment I do not know of a good solution to force a re-calc of the Tabs. I tried .doLayout() and .syncSize() on "TabPanel1", although neither really seemed to do the trick.

Example


<Resize Handler="if(window.{TabPanel1}){window.{TabPanel1}.syncSize ();}" />

If you're dynamically creating the Tabs, I might explore the option of also dynamically creating the parent TabPanel, then somehow get an instance of the <Center> Region and add the TabPanel to it's .Items Collection.

Example


this.BorderLayout1.Center.Items.Add(tabPanel);

Or, all from code-behind, you could create a FitLayout control, then add the TabPanel to the FitLayout, then add the FitLayout to the "CenterPanel" .ContentControls Collection.

Example


this.CenterPanel.ContentControls.Add(myFitLayout);

I'll chew on this for while and maybe a better solution will pop into my head.

Hope this helps.

stevenoc
Jun 05, 2008, 5:00 AM
Hi Geoffrey,

Thanks for the quick reply.

I've tried another take (taking my queue/direction from your second option)

On the page "Default.aspx" I've created a reference to my test user control, which I then Initialize (as it doesn't load the Page_Load method, I created a public function which will populate the TabPanel).

Depending on what I set my testOption variable to (option1, anything else) it either loads:
a.) the User Control directly into a FitLayout Control (option1)
b.) the first TabPanel it finds within the UserControl into a FitLayout

I then add the FitLayout control to the CenterPanel.

I can't say that it didn't work in either case, its just that it yielded an unexpected result.

The "TabStrip" was not rendered within the CenterPanel, but outside of it.

Could this "quirk" be as a result of adding the User Control directly to the FitLayout's Control collection (which you have mentioned may cause some problems - albeit not in this thread) ?

Regards
Steven O'Connor

stevenoc
Jun 19, 2008, 5:17 PM
Hi Geoffrey,

I don't suppose there has been any movement / insight on this problem since your last reply?

Regards
Steven O'Connor