[CLOSED] ScrollBar TabPanel Resizing

  1. #1

    [CLOSED] ScrollBar TabPanel Resizing

    Hi,

    I hope you can help me on an issue concerning the automatic display of scroll bars when resizing a window (or when the screen is too small)...

    Here is an example:

    Here is the Parent web form:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormParent.aspx.cs"
        Inherits="Application_CRITT_SL.Test.WebFormParent" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="WebUserControlSubPage.ascx" TagName="SubPage" TagPrefix="ong" %>
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
               <ext:Viewport ID="ViewPort1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="PanelGeneral" runat="server" Region="Center" Margins="3" Border="true">
                    <Content>
            <ext:TabPanel ID="TabPanel1" runat="server" Title="Association..." Border="false">
                <Items>
                    <ext:Panel ID="PanelSubPage1" runat="server" Title="SubPage1" Border="false" Height="750"
                        Padding="5">
                        <Content>
                            <ext:FitLayout ID="FitLayout1" runat="server">
                                <Content>
                                    <ong:SubPage ID="SubPage1" runat="server" />
                                </Content>
                            </ext:FitLayout>
                        </Content>
                    </ext:Panel>
                    <ext:Panel ID="PanelSubPage2" runat="server" Title="SubPage2" Border="false" Height="750"
                        Padding="5">
                        <Content>
                            <ext:FitLayout ID="FitLayout2" runat="server">
                                <Content>
                                    <ong:SubPage ID="SubPage2" runat="server" />
                                </Content>
                            </ext:FitLayout>
                        </Content>
                    </ext:Panel>
                </Items>
            </ext:TabPanel>
                    </Content>
                </ext:Panel>
                <ext:Panel ID="Panel1" runat="server" Region="West" Width="50" BodyStyle="background:white;"
                    Border="false">
                </ext:Panel>
                <ext:Panel ID="Panel2" runat="server" Region="East" Width="50" BodyStyle="background:white;"
                    Border="false">
                </ext:Panel>
                <ext:Panel ID="Panel3" runat="server" Region="North" Height="50" BodyStyle="background:white;"
                    Border="false">
                </ext:Panel>
                <ext:Panel ID="Panel4" runat="server" Region="South" Height="50" BodyStyle="background:white;"
                    Border="false">
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </div>
        </form>
    </body>
    </html>
    Here is the child control :

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControlSubPage.ascx.cs"
        Inherits="Application_CRITT_SL.Test.WebUserControlSubpage" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Panel ID="Panel1" runat="server" Border="false" Layout="FitLayout" Height="300"
        AnchorHorizontal="100%">
        <Content>
            <ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true">
                <Columns>
                    <ext:LayoutColumn ColumnWidth="0.5">
                        <ext:Panel runat="server" ID="ctl44" Layout="FormLayout" Border="false" AutoHeight="true"
                            LabelSeparator="">
                            <Content>
                                <ext:TextField ID="TextFieldNom1" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom2" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom3" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom4" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom5" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom6" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                            </Content>
                        </ext:Panel>
                    </ext:LayoutColumn>
                    <ext:LayoutColumn ColumnWidth="0.5">
                        <ext:Panel runat="server" ID="ctl49" Border="false" Layout="FormLayout" LabelSeparator=""
                            AutoHeight="true">
                            <Content>
                                <ext:TextField ID="TextFieldNom7" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom8" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                                <ext:TextField ID="TextFieldNom9" runat="server" FieldLabel="Nom" AnchorHorizontal="90%">
                                </ext:TextField>
                            </Content>
                        </ext:Panel>
                    </ext:LayoutColumn>
                </Columns>
            </ext:ColumnLayout>
        </Content>
    </ext:Panel>
    Here is how it looks full size:
    Click image for larger version. 

Name:	FullSize.png 
Views:	155 
Size:	39.7 KB 
ID:	3656

    Here is how it looks reduced size (or when the screen is very small):
    Click image for larger version. 

Name:	SmallSize.png 
Views:	219 
Size:	37.5 KB 
ID:	3657

    Thank you for your help !!
    Last edited by Daniil; Jan 04, 2012 at 12:19 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Well, your layout causes that panels are stretched up according to a Viewport's size.

    Please try the following example. It's corrected and minimized version of your example.

    Example Page
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="TestUC.ascx" TagName="TestUC" TagPrefix="uc" %>
    <!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="Center">
                        <Items>
                            <ext:TabPanel runat="server">
                                <Items>
                                    <ext:Panel runat="server" Title="Tab 1" Height="750">
                                        <Content>
                                            <uc:TestUC runat="server" />
                                        </Content>
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Example User Control
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:FitLayout runat="server">
        <Items>
            <ext:Panel runat="server" Height="300" Layout="ColumnLayout">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        ColumnWidth="0.5" 
                        Layout="FormLayout" 
                        DefaultAnchor="90%">
                        <Items>
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                        </Items>
                    </ext:Panel>
                    <ext:Panel 
                        runat="server" 
                        ColumnWidth="0.5" 
                        Layout="FormLayout" 
                        DefaultAnchor="90%">
                        <Items>
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
    Stretching and scrolling are incompatible.

    If you still need scrolling, please clarify some details:

    1. What width of a Viewport should cause a scrollbar to be appeared?

    2. What exactly container (-s) would you like a scrollbar to be appeared?
  3. #3
    Thank you, that is a usefull answer for me!

    But if I want to go a bit further, I would like to use FitLayout as you showd me but when the screen is less that a minimum width, I make scroll bars appear inside the Tabs.
    It is kind of a security for being able to display the result even on small screens such as one of netbooks.

    If it is not possible, can you please tell me what do you suggest to go over this issue?

    Thank you again!
  4. #4
    Hi,

    I can suggest the following solution.

    Example Page
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="TestUC.ascx" TagName="TestUC" TagPrefix="uc" %>
    <!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>
    
        <script type="text/javascript">
            var onResize = function (item, adjWidth, adjHeight) {
                var ct = this.items.get(0);
    
                if (adjWidth < 600) {
                    adjWidth = 600;
                    adjHeight = adjHeight - 17;
                }
                ct.setWidth(adjWidth);
                ct.setHeight(adjHeight);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Panel runat="server" Region="Center">
                        <Items>
                            <ext:TabPanel runat="server">
                                <Items>
                                    <ext:Panel 
                                        runat="server" 
                                        Title="Tab 1" 
                                        AutoScroll="true">
                                        <Items>
                                            <ext:Container runat="server">
                                                <Content>
                                                    <uc:TestUC runat="server" />
                                                </Content>
                                            </ext:Container>
                                        </Items>
                                        <Listeners>
                                            <Resize Fn="onResize" />
                                        </Listeners>
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Example User Control
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:FitLayout runat="server">
        <Items>
            <ext:Panel runat="server" Height="300" Layout="ColumnLayout">
                <Items>
                    <ext:Panel
                        runat="server"
                        ColumnWidth="0.5"
                        Layout="FormLayout"
                        DefaultAnchor="90%">
                        <Items>
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                        </Items>                    
                    </ext:Panel>
                    <ext:Panel
                        runat="server"
                        ColumnWidth="0.5"
                        Layout="FormLayout"
                        DefaultAnchor="90%">
                        <Items>
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                            <ext:TextField runat="server" FieldLabel="TextField" />
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
  5. #5
    Thank you very much Daniil, Works great!
    There is loads of things I still have to learn!

Similar Threads

  1. [CLOSED] TabStrip not Resizing
    By egvt in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 23, 2012, 3:58 PM
  2. [CLOSED] Bug resizing ViewPort
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 15, 2010, 6:33 PM
  3. [CLOSED] Resizing issue
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 04, 2010, 12:53 PM
  4. [CLOSED] BorderLayout and resizing
    By Riset in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 26, 2009, 6:37 AM
  5. Replies: 6
    Last Post: Jun 19, 2008, 5:17 PM

Tags for this Thread

Posting Permissions