How to make a correct resize of a columnlayout?

  1. #1

    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:	58 
Size:	44.0 KB 
ID:	3514


    Image west closed
    Click image for larger version. 

Name:	Incorrect.jpg 
Views:	45 
Size:	49.7 KB 
ID:	3515
    Last edited by Fabrizio; Nov 28, 2011 at 3:27 PM.
  2. #2
    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

    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. Replies: 3
    Last Post: May 03, 2011, 2:20 PM
  4. Replies: 11
    Last Post: Apr 08, 2010, 1:36 PM
  5. Replies: 3
    Last Post: Feb 22, 2009, 2:58 PM

Tags for this Thread

Posting Permissions