[CLOSED] Basic Layout question for Layout Fit / AutoHeight

  1. #1

    [CLOSED] Basic Layout question for Layout Fit / AutoHeight

    Hello,

    I have a nearly basic layout question....

    What do I have to do to fit my tabs on the Center to the full height?


    Here is the code snipped

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="Settings/SystemSettingsControl.ascx" TagName="SystemSettingsControl"
        TagPrefix="uc1" %>
    <!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>AffiliManager - Backend Configuration</title>
        <style type="text/css">
            .icon-exclamation
            {
                padding-left: 25px !important;
                background: url(/icons/exclamation-png/ext.axd) no-repeat 3px 3px !important;
            }
            
            .icon-accept
            {
                padding-left: 25px !important;
                background: url(/icons/accept-png/ext.axd) no-repeat 3px 3px !important;
            }
            
            .menu-link
            {
                font-family: Arial, Sans-Serif;
                font-size: 8pt;
                font-style: normal;
                text-decoration: none;
                color: Black;
                padding: 5 0 0 10;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager runat="server" Theme="Slate" />
        <ext:Panel ID="PanelBasic" runat="server" Title="AffiliManager - Backend Configuration"
            Icon="ApplicationFormEdit" AutoWidth="true" Height="800" Border="false" Collapsible="false"
            Layout="Fit" MonitorResize="true">
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server">
                    <West Collapsible="true" MinWidth="175" Split="true">
                        <ext:Panel ID="WestPanel" runat="server" Width="175" Layout="Accordion">
                            <Items>
                                <ext:Panel ID="Navigation" runat="server" Title="Navigation" Icon="FolderGo" Border="false"
                                    Html="West" Collapsed="true" />
                                <ext:Panel ID="Settings" runat="server" Title="Settings" Icon="FolderWrench" Border="false"
                                    Layout="Row" Collapsed="true">
                                    <Items>
                                        <ext:LinkButton ID="LinkButtonDatabaseSettings" runat="server" Icon="DatabaseEdit"
                                            IconAlign="Left" Text="System configuration" Cls="menu-link">
                                            <Listeners>
                                                <Click Handler="#{BaseTabPanel}.addTab(#{TabSystemSettings});" />
                                            </Listeners>
                                        </ext:LinkButton>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Panel>
                    </West>
                    <Center>
                        <ext:TabPanel runat="server" ID="BaseTabPanel" AutoHeight="true" ActiveTabIndex="0">
                            <Items>
                                <ext:Panel ID="TabOverview" runat="server" Title="Overview" Padding="6" Icon="Information" />
                                <ext:Panel ID="TabSystemSettings" runat="server" Title="System Configuration" CloseAction="Hide"
                                    Hidden="true" Icon="DatabaseEdit" Layout="Fit">
                                    <Content>
                                        <ext:FormPanel ID="FormPanelSystemConfiguration" runat="server" MonitorPoll="500"
                                            MonitorValid="true"  ButtonAlign="Right">
                                            <Items>
                                                <ext:TabPanel ID="TabPanelSystemSettings" runat="server">
                                                    <Items>
                                                        <ext:Panel ID="PanelAdminSettings" runat="server" Border="false" Layout="Form" LabelAlign="Left"
                                                            Title="Administrator" Icon="User">
                                                            <Defaults>
                                                                <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                                                <ext:Parameter Name="MsgTarget" Value="side" />
                                                            </Defaults>
                                                            <Items>
                                                                <ext:TextField ID="TextFieldName" runat="server" FieldLabel="Name" />
                                                                <ext:TextField ID="TextFieldEmail" runat="server" FieldLabel="Email" Vtype="email" />
                                                            </Items>
                                                        </ext:Panel>
                                                        <ext:Panel ID="PanelAffilinetSettings" runat="server" Border="false" Layout="Form"
                                                            LabelAlign="Left" Title="Affilinet">
                                                            <Defaults>
                                                                <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                                                                <ext:Parameter Name="MsgTarget" Value="side" />
                                                            </Defaults>
                                                            <Items>
                                                                <ext:Panel ID="PanelGeneralSettings" Title="General" runat="server">
                                                                    <Items>
                                                                        <ext:NumberField ID="NumberFieldShopId" runat="server" FieldLabel="ShopId" />
                                                                    </Items>
                                                                </ext:Panel>
                                                                <ext:Panel ID="PanelWebserviceSettings" Title="Webservice" runat="server">
                                                                    <Items>
                                                                        <ext:TextField ID="TextFieldUsernameLiveSystem" runat="server" FieldLabel="Username Livesystem" />
                                                                        <ext:TextField ID="TextFieldUsernameSandboxSystem" runat="server" FieldLabel="Username Sandboxsystem" />
                                                                        <ext:TextField ID="TextFieldPasswordWebserviceProduct" runat="server" FieldLabel="Password Product" />
                                                                        <ext:TextField ID="TextFieldPasswordWebservicePublisher" runat="server" FieldLabel="Password Publisher" />
                                                                    </Items>
                                                                </ext:Panel>
                                                                <ext:Panel ID="PanelCsvSettings" Title="Csv" runat="server">
                                                                    <Items>
                                                                        <ext:TextField ID="TextFieldUrlCsvData" runat="server" FieldLabel="UrlCsvData" Vtype="url" />
                                                                        <ext:TextField ID="TextFieldUrlCsvStatus" runat="server" FieldLabel="UrlCsvStatus"
                                                                            Vtype="url" />
                                                                    </Items>
                                                                </ext:Panel>
                                                            </Items>
                                                        </ext:Panel>
                                                    </Items>
                                                </ext:TabPanel>
                                            </Items>
                                            <Buttons>
                                                <ext:Button ID="Button1" runat="server" Text="Save">
                                                    <Listeners>
                                                        <Click Handler="if (#{FormPanelSystemConfiguration}.getForm().isValid()) {Ext.Msg.alert('Submit', 'Saved!');}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'FormPanel is incorrect', buttons:Ext.Msg.OK});}" />
                                                    </Listeners>
                                                </ext:Button>
                                                <ext:Button ID="Button2" runat="server" Text="Cancel" />
                                            </Buttons>
                                            <BottomBar>
                                                <ext:StatusBar ID="StatusBar1" runat="server" />
                                            </BottomBar>
                                            <Listeners>
                                                <ClientValidation Handler="el.getBottomToolbar().setStatus({text : valid ? 'Form is valid' : 'Form is invalid', iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
                                            </Listeners>
                                        </ext:FormPanel>
                                    </Content>
                                </ext:Panel>
                            </Items>
                        </ext:TabPanel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>

    Regards,

    Martin
  2. #2

    RE: [CLOSED] Basic Layout question for Layout Fit / AutoHeight

    Ok... The AutoHeight in the TabPanel was wrong :-)
  3. #3

    RE: [CLOSED] Basic Layout question for Layout Fit / AutoHeight

    Hi Martin,

    I think there are a few revisions you can make to your original sample. I would recommend using the <Items> collection, instead of <Content>.

    Please also ensure you do not set both the .Layout property and include an inner Layout control within the same container.

    Example

    <%@ 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" Theme="Slate" />
            
            <ext:Panel 
                runat="server" 
                Title="AffiliManager - Backend Configuration"
                Icon="ApplicationFormEdit" 
                Height="800" 
                Border="false" 
                Collapsible="false"
                Layout="border">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Region="West"
                        Width="175" 
                        Layout="Accordion"
                        Collapsible="true"
                        MinWidth="175"
                        Split="true">
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Navigation" 
                                Icon="FolderGo" 
                                Border="false"
                                Html="West" 
                                Collapsed="true" 
                                />
                            <ext:Panel 
                                runat="server" 
                                Title="Settings" 
                                Icon="FolderWrench" 
                                Border="false"
                                Layout="Row" 
                                Collapsed="true">
                                <Items>
                                    <ext:LinkButton 
                                        runat="server" 
                                        Icon="DatabaseEdit"
                                        IconAlign="Left" 
                                        Text="System configuration"
                                        /> 
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                    <ext:TabPanel runat="server" Region="Center">
                        <Items>
                            <ext:Panel runat="server" Title="Overview" Padding="6" Icon="Information" />
                            <ext:Panel 
                                runat="server" 
                                Title="System Configuration" 
                                Icon="DatabaseEdit" 
                                Layout="Fit">
                                <Items>
                                    <ext:FormPanel runat="server" ButtonAlign="Right" Layout="fit" Border="false">
                                        <Items>
                                            <ext:TabPanel runat="server" Border="false">
                                                <Items>
                                                    <ext:Panel 
                                                        runat="server" 
                                                        Border="false" 
                                                        Layout="Form" 
                                                        LabelAlign="Left"
                                                        Title="Administrator" 
                                                        Icon="User"
                                                        Padding="5">
                                                        <Items>
                                                            <ext:TextField runat="server" FieldLabel="Name" />
                                                            <ext:TextField runat="server" FieldLabel="Email" Vtype="email" />
                                                        </Items>
                                                    </ext:Panel>
                                                    <ext:Panel 
                                                        runat="server" 
                                                        Border="false" 
                                                        LabelAlign="Left" 
                                                        Title="Affilinet">
                                                        <Items>
                                                            <ext:Panel Title="General" runat="server" Padding="5" Border="false" Layout="Form">
                                                                <Items>
                                                                    <ext:NumberField runat="server" FieldLabel="ShopId" />
                                                                </Items>
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Panel>
                                                </Items>
                                            </ext:TabPanel>
                                        </Items>
                                        <Buttons>
                                            <ext:Button runat="server" Text="Save" />
                                            <ext:Button runat="server" Text="Cancel" />
                                        </Buttons>
                                        <BottomBar>
                                            <ext:StatusBar runat="server" />
                                        </BottomBar>
                                    </ext:FormPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
    Hope this helps.

    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Basic Layout problem
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2012, 10:40 AM
  2. Replies: 2
    Last Post: Mar 04, 2011, 11:54 AM
  3. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  4. Column layout question
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 11, 2009, 9:10 AM
  5. [CLOSED] Layout Question
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 02, 2009, 10:31 AM

Posting Permissions