What's New?

How to make a correct resize of a columnlayout?

  1. #1
    Nov 28, 2011, 3:23 PM

    How to make a correct resize of a columnlayout?

    Hello everyone,
    I have a small problem with the resize a column layout, I have a page with a viewport that has the panels north, south, west and center.

    

<body>
<form id="form1" runat="server">
	<ext:ResourceManager ID="ResourceManagerSanCarPooling" runat="server" Locale="Client"></ext:ResourceManager>
	<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManagerSanCarPooling"  />


		<ext:Viewport ID="ViewportSancar" runat="server" Layout="border">
			<Items>
                    
<%--PANNELLO NORTH--%>
<ext:Panel ID="PanelNorthSanca" 
   runat="server"
   Collapsible="True" 
   Height="200"
   MinHeight="200"
   MaxHeight="200"
   Region="North"
   Split="True" >
   <LayoutConfig>
		<ext:ColumnLayoutConfig FitHeight="false"  />
   </LayoutConfig>
<Items>


<ext:ColumnLayout ID="columnLayoutNorth" runat="server" Split="false">
                               
<Columns>


<ext:LayoutColumn>
	<ext:Panel ID="PanelColonnaSinistra" 
			   runat="server" 
			   Width="300"
			   BodyBorder="false" 
			   Border="false" 
			   HideBorders="true"
			   BodyCssClass="SfondoColonnaSinistra"
			   Header="false">
		<Content>
			 <div>
				
			 </div>
		</Content>
	</ext:Panel>
</ext:LayoutColumn>


<ext:LayoutColumn ColumnWidth="0.75">
	<ext:Panel ID="PanelColonnaCentro" 
			   Height="173"
			   BodyBorder="false"
			   Border="false"
			   HideBorders="true"
			   BodyCssClass="SfondoColonnaCentro"
			   Header="false"
			   runat="server">
			<Items>
			
			</Items>
	</ext:Panel>
</ext:LayoutColumn>


<ext:LayoutColumn ColumnWidth="0.9">


<ext:Panel 
ID="PanelCerca" 
runat="server" 
Border="false"
Header="false"
Padding="3"
BodyCssClass="SfondoColonnaDestra"
Height="173">
<Items>


	<ext:Panel runat="server"
		ID="pnlContentCerca"  
		Title="Cerca Nel Sito" 
		Frame="true"
		Collapsible="true"
		Collapsed="true"
		Height="80"
		Cls="pnlContenCerca"
		AutoHeight="false"
		BodyStyle="10px 5px 5px;">


		<Items>


		<ext:FormPanel ID="PanelFormCerca" 
				runat="server" Height="80" 
				MonitorValid="true" 
				BaseCls="x-plain" 
				Border="true" 
				Layout="Absolute">
		   <Defaults>
				<ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
				<ext:Parameter Name="MsgTarget" Value="side" />
		   </Defaults>
			<Items>
				<ext:ImageButton ID="ButtonCerca" ImageUrl="Immagini/search.png" OverImageUrl="Immagini/searchHover.png"  runat="server" X="10" Y="14">
				
				</ext:ImageButton>
				<ext:TextField ID="TextFieldCerca" AllowBlank="false" runat="server" X="39" Y="14" AnchorHorizontal="95%"></ext:TextField>
			</Items>
		</ext:FormPanel>
	</Items>


	</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutColumn>


</Columns>
</ext:ColumnLayout>
</Items>
</ext:Panel>


<%--PANNELLO WEST--%>
<ext:Panel ID="PanelWestSanca" 
		   runat="server" 
		   Collapsible="true" 
		   Layout="accordion" 
		   Region="West" 
		   Split="true" 
		   MaxWidth="400"
		   MinWidth="225" 
		   Width="225">
	<Items>
		<ext:Panel ID="Panel7" runat="server" Border="false" Collapsed="True" Icon="FolderGo" Title="Item 1">
			<Items>
			</Items>
		</ext:Panel>
		<ext:Panel ID="Panel8" runat="server" Border="false" Collapsed="true" Icon="FolderWrench" Title="Item 2">
			<Items>
			</Items>
		</ext:Panel>
	</Items>
</ext:Panel>


	  <%--PANNELLO CENTER--%>
	<ext:Panel ID="PanelCenterSanca" 
			   runat="server" 
			   Layout="Fit" 
			   Region="Center">
		<Items>
<ext:TabPanel ID="TabPanelSanca" runat="server" ActiveTabIndex="0" Border="false">
<Items>


	<ext:Panel ID="PanelHomePage" runat="server" Title="Home Page">
		<AutoLoad Url="HomePageSanca.aspx" ShowMask="true" Mode="IFrame"></AutoLoad>
	</ext:Panel>


	<ext:Panel ID="PanelRegistrazione" runat="server" Title="Registrati">
		<Content>
		 
		</Content>
	</ext:Panel>
	<ext:Panel ID="PanelOffriPassaggio" runat="server" Title="Offri Passaggio">
		<Content>
		
		</Content> 
	</ext:Panel>
	<ext:Panel ID="PanelTrovaPassaggio" runat="server" Title="Trova Passaggio">
		<Content>
		
		</Content>
	</ext:Panel>
	<ext:Panel ID="PanelComeFunziona" runat="server" Title="Come Funziona">
		<Content>
		
		</Content>
	</ext:Panel>
				</Items>
			</ext:TabPanel>
		</Items>
	</ext:Panel>


	<%--PANNELLO SOUTH--%>
	<ext:Panel ID="PanelSouthSanca" 
			   runat="server" 
			   Collapsible="true" 
			   Height="100"
			   MaxHeight="100"
			   Region="South" 
			   Split="true">
		<Items>
		</Items>
	</ext:Panel>


</Items>
</ext:Viewport>


    </form>
</body>

    I have a tabpanel in the center panel in the first tab and load a page. aspx withAutoLoad.This page loaded with two columns I have a ColumnLayout
    If I collapse the panel ColumnLayout north clearly does not resize it because the measures of the columns are fixed.
    is it possible to resize properly?

    Thanks a lot
    Fabrizio

    
<body>
    <form id="form1" runat="server">


        <ext:ResourceManager ID="ResourceManagerSanCarPoolingHome" runat="server" Locale="Client"></ext:ResourceManager>
        <ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManagerSanCarPoolingHome"  />
       
       
        <%--MENU FOR INFO --%>
        <ext:MenuPanel ID="PanelMenuSpiegazioni" SaveSelection="false" Height="28" runat="server" Border="false" HideBorders="true">
        
           <Menu ID="menuSpiegazioni" runat="server" Hidden="false" ShowSeparator="false" EnableScrolling="false" Cls="x-menu-horizontal" Floating="false">
              <Items>
                <ext:MenuItem ID="MenuItemCosaCarPooling" runat="server" Text="Cosa è il Car Pooling?" Icon="CarAdd">
                    <DirectEvents>
                        <Click OnEvent="MenuItemCosaCarPooling_Click" />
                    </DirectEvents>
                </ext:MenuItem>
                <ext:MenuItem ID="MenuItemFunziona" runat="server" Text="Come funziona Sanca-R-Pooling" Icon="Shape3d">
                    <DirectEvents>
                       <Click OnEvent="MenuItemFunziona_Click"></Click>
                    </DirectEvents>
                </ext:MenuItem>
                <ext:MenuItem ID="MenuItemVantaggi" runat="server" Text="Vantaggi:  - Inquinamento  + Risparmio" Icon="MedalGold1">
                    <DirectEvents>
                       <Click OnEvent="MenuItemVantaggi_Click"></Click>
                    </DirectEvents>
                </ext:MenuItem>
                <ext:MenuItem ID="MenuItemSicurezza" runat="server" Text="Sicurezza" Icon="CarDelete">
                    <DirectEvents>
                       <Click OnEvent="MenuItemSicurezza_Click"></Click>     
                    </DirectEvents>
                </ext:MenuItem>
              </Items>
           </Menu>
        </ext:MenuPanel>


<%--PAGE BODY--%>
<ext:Panel ID="pnlPaginaHome" Border="false" Header="false" runat="server">
   <Items>
                
<%--PAGE BODY COLUMNS--%>
<ext:ColumnLayout ID="ColumnLayoutHomePageTab"  runat="server">
    <Columns>
         
        <%--CENTRAL COLUMN--%>
        <ext:LayoutColumn ColumnWidth="0.70">
            <ext:Panel ID="PanelCentroHomeTab" Padding="6" runat="server" BodyBorder="true" Header="false">
               <Content>
                    <div>
                       centro
                    </div>
               </Content>
            </ext:Panel>
        </ext:LayoutColumn>
        <%--END CENTRAL COLUMN--%>


<%--LEFT COLOUMN--%>
<ext:LayoutColumn ColumnWidth="0.30">
    <ext:Panel ID="PanelSinistraHomeTab" runat="server" BodyBorder="true" Header="false">
        <Content>


<%--DIV LOGIN--%>
<div id="login">
    <div class="barrettinaLog" id="barraLogInAlto">
       <p style="padding-top:10px;">Log-In Utente</p>
    </div>


    <asp:Login ID="LoginSanca" FailureText="Si è verificato un errore durante il log-in Si prega di riprovare." runat="server">
        <FailureTextStyle  Font-Names="Signika" Font-Size="12px" ForeColor="Red" />
        <LayoutTemplate>
<table style="border-collapse:collapse;">
    <tr>
    <td>
        <table>
            <tr>
              <td colspan="2" style="top: 0px; left: 0px;vertical-align:top;">
                <img src="Immagini/spacer.png" width="1px" height="5px" alt="spacer" />
              </td>
            </tr>
        <tr>
            <td style="text-align:right; width:120px;color: #336699;font-weight: bold;">
                <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">Nome:</asp:Label>
            </td>
            <td style="text-align:left;padding:2px;">
                <asp:TextBox ID="UserName" runat="server" Width="210px"></asp:TextBox>
                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ForeColor="Red" 
                    ControlToValidate="UserName" ErrorMessage="Richiesto." 
                    ToolTip="IL nome utente è obbligatorio." ValidationGroup="LoginSanca">*</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td style="text-align:right; width:120px;color: #336699;font-weight: bold;">
                <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
            </td>
            <td style="text-align:left;padding:2px;">
                <asp:TextBox ID="Password" runat="server" TextMode="Password" Width="210px"></asp:TextBox>
                <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ForeColor="Red" 
                    ControlToValidate="Password" ErrorMessage="Richiesto." 
                    ToolTip="La password è obbligatoria." ValidationGroup="LoginSanca">*</asp:RequiredFieldValidator>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding-top:5px; padding-bottom:5px; padding-left:5px; color: #FF0000; font-family: Arial, Helvetica, sans-serif; font-size: 12px;text-align:center;">
                <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
            </td>
        </tr>
        <tr>
        <td style="padding-left:10px;">
            <asp:Button ID="LoginButton" CssClass="btn green" runat="server" CommandName="Login" Text="LogIn Utente" ValidationGroup="LoginSanca" /> 
        </td>


        <td style="text-align:right;width:210px;">
            <asp:CheckBox ID="RememberMe"  runat="server" Text="&nbsp; Ricordami." />
        </td>
        </tr>
        <tr>
          <td colspan="2" style="top: 0px; left: 0px;vertical-align:top;">
            <img src="Immagini/spacer.png" width="1px" height="5px" alt="spacer" />
          </td>
        </tr>
            </table>
        </td>
    </tr>
</table>
        </LayoutTemplate>
    </asp:Login>
</div>
<%--FINE DIV LOGIN--%>
</Content>
</ext:Panel>
</ext:LayoutColumn>
        <%--END LEFT COLOUMN--%>
    </Columns>
</ext:ColumnLayout>
<%--END BODY COLOUMN--%>


          </Items>
        </ext:Panel>
         <%--END PAGE BODY--%>
    </form>
</body>
    Image west Open
    Click image for larger version.  Name: WestOpen.jpg  Views: 95  Size: 44.0 KB  ID: 3514


    Image west closed
    Click image for larger version.  Name: Incorrect.jpg  Views: 80  Size: 49.7 KB  ID: 3515
    Last edited by Fabrizio; Nov 28, 2011 at 3:27 PM.
  2. #2
    Nov 29, 2011, 6:24 AM
    Hi,

    Please always simplify the samples before posting, leaving only related to a problem things.

    For example, the sample below reproduces the problem you described, but looks much clearer.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    runat="server" 
                    Region="West"
                    Width="200" 
                    Collapsible="true" />
                <ext:TabPanel runat="server" Region="Center">
                    <Items>
                        <ext:Panel runat="server" Title="Tab1">
                            <AutoLoad Mode="IFrame" Url="Test.aspx" />
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Example IFrame Page
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" 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>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Container runat="server" Layout="ColumnLayout" Height="200">
            <Items>
                <ext:Panel runat="server" ColumnWidth="0.7" BodyStyle="background-color: green;" />
                <ext:Panel runat="server" ColumnWidth="0.7" BodyStyle="background-color: blue;" />
            </Items>
        </ext:Container>
    </form>
</body>
</html>
    Setting up MonitorResize="true" for the <ext:Container> in the IFrame page solves the problem.

    Example
    <ext:Container 
    runat="server" 
    Layout="ColumnLayout" 
    Height="200" MonitorResize="true">
    <Items>
        <ext:Panel runat="server" ColumnWidth="0.7" BodyStyle="background-color: green;" />
        <ext:Panel runat="server" ColumnWidth="0.7" BodyStyle="background-color: blue;" />
    </Items>
</ext:Container>
  3. #3
    Nov 29, 2011, 1:39 PM

    Thaks

    Sorry it's true, I have exaggerated
    Hello everyone and thanks

Similar Threads

  1. [CLOSED] What is the correct syntax for this?
    By jmcantrell in forum 1.x Legacy Premium Help
    Replies: 21
    Last Post: Jul 10, 2012, 9:59 PM
  2. [CLOSED] How to make scalable ColumnLayout from code behind?
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 17, 2012, 4:36 PM
  3. [CLOSED] ColumnLayout - how do I make it resize if its container is resized?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: May 03, 2011, 2:20 PM
  4. [CLOSED] Can I use a control to optionally allow the user to make the viewing panel larger (by hiding/collapsing the left hand panel) to make .swf display a bit larger?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Apr 08, 2010, 1:36 PM
  5. [CLOSED] Portal Resize Ajax Event fires on page load... not just on the resize
    By iansriley in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 22, 2009, 2:58 PM

Tags for this Thread

Posting Permissions