[CLOSED] Minimum size of a page

**majunior** · Jun 20, 2011, 11:59 PM

Originally Posted by Daniil

Just place the TabPanel into the additional container.

<ext:Container runat="server" AutoScroll="true">
    <Items>
        <ext:TabPanel ... />
    </Items>
</ext:Container>

Okay, but I can not set the size of the panel, I want what is inside the viewport occupies the size of the monitor.

**Daniil** · Jun 21, 2011, 3:22 AM

At the moment I can't see any way to force scrollbar appearing without fixed size for the tabs.

What is the content of tabs? Con you provide a simplified sample to reproduce your requirement?

**majunior** · Jun 21, 2011, 12:47 PM

Originally Posted by Daniil

At the moment I can't see any way to force scrollbar appearing without fixed size for the tabs.

What is the content of tabs? Con you provide a simplified sample to reproduce your requirement?

This is the structure that I have.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<%@ 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 id="Head1" runat="server">
</head>
<body>
   
    <form id="frmSutPrt00" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <div class="divFundoMenu1">
    </div>
    <div class="divFundoMenu2">
    </div>
    <div class="divLogoMenu">
    </div>
    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North Split="true" MarginsSummary="5 5 0 5" MinHeight="73px" MaxHeight="73px">
                    <ext:Panel ID="PnlMenus" runat="server" MinHeight="73px" MaxHeight="73px" Height="73px"
                        Cls="CssExtPainelTop">
                        <Items>
                        </Items>
                    </ext:Panel>
                </North>
                <West Collapsible="true" Split="true" MinHeight="210px" MinWidth="130px" MaxWidth="500px"
                    MarginsSummary="0 0 5 5" CMarginsSummary="5 5 5 5" UseSplitTips="True" ExpandableSplitTip="Exibe o painel lateral"
                    SplitTip="Splitxxx" CollapsibleSplitTip="Altera largura do painel lateral">
                    <ext:Panel ID="pnlMenu2" runat="server" Title="" MinHeight="200px" MinWidth="130px"
                        Cls="CssExtPainelMenuTreeView" MaxWidth="500px" Width="184px">
                        <Items>
                        </Items>
                    </ext:Panel>
                </West>
                <Center MarginsSummary="0 5 5 0">
                    <ext:TabPanel ID="TabPanelPages" runat="server" EnableTabScroll="true" Cls="CssExtTabPages"
                        MinHeight="240px" LabelPad="5" HideMode="Offsets">
                        <Items>
                        </Items>
                    </ext:TabPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Jun 21, 2011, 4:35 PM

I can't see for what you need scrolling.

I should say also that Viewport should be a top level single container.

I mean this layout is wrong:

<div class="divLogoMenu">
</div>
<ext:Viewport ID="Viewport1" runat="server">

I'd suggest you to put these divs into North region.

**majunior** · Jun 21, 2011, 6:27 PM

Originally Posted by Daniil

I can't see for what you need scrolling.

I should say also that Viewport should be a top level single container.

I mean this layout is wrong:

<div class="divLogoMenu">
</div>
<ext:Viewport ID="Viewport1" runat="server">

I'd suggest you to put these divs into North region.

This would be your suggestion?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BarraRolagem950.aspx.cs"
    Inherits="WebApplication1.WebForm3" %>

<%@ 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 id="Head1" runat="server">
</head>
<script type="text/javascript">
    var onResize = function () {
        Container1.setAutoScroll(this.getWidth() < 950);
    }
</script>
<body>
    <form id="frmSutPrt00" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Container ID="Container1" runat="server" Region="Center" AutoScroll="true">
                <Items>
                    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <North Split="true" MarginsSummary="5 5 0 5" MinHeight="73px" MaxHeight="73px">
                            <ext:Panel ID="Panel1" runat="server" MinHeight="73px" MaxHeight="73px" Height="73px"
                                Cls="CssExtPainelTop">
                                <Content>
                                    <div class="divFundoMenu1">
                                    </div>
                                    <div class="divFundoMenu2">
                                    </div>
                                    <div class="divLogoMenu">
                                    </div>
                                </Content>
                            </ext:Panel>
                        </North>
                        <West Collapsible="true" Split="true" MinHeight="210px" MinWidth="130px" MaxWidth="500px"
                            MarginsSummary="0 0 5 5" CMarginsSummary="5 5 5 5" UseSplitTips="True" ExpandableSplitTip="Exibe o painel lateral"
                            SplitTip="Splitxxx" CollapsibleSplitTip="Altera largura do painel lateral">
                            <ext:Panel ID="pnlMenu2" runat="server" Title="" MinHeight="200px" MinWidth="130px"
                                Cls="CssExtPainelMenuTreeView" MaxWidth="500px" Width="184px">
                                <Items>
                                </Items>
                            </ext:Panel>
                        </West>
                        <Center MarginsSummary="0 5 5 0">
                            <ext:TabPanel ID="TabPanelPages" runat="server" EnableTabScroll="true" Cls="CssExtTabPages"
                                MinHeight="240px" LabelPad="5" HideMode="Offsets">
                                <Items>
                                </Items>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>
                </Items>
                <Listeners>
                    <Resize Fn="onResize" />
                </Listeners>
            </ext:Container>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

**Daniil** · Jun 22, 2011, 7:51 AM

Yes, looks good.

Regarding scrolling.

I guess you need something like this:

Example

<script type="text/javascript">
    var onResize = function() {
        this.setAutoScroll(this.getWidth() < 950);
    }
</script>

<ext:TabPanel runat="server">
    <Items>
        <ext:Container runat="server" Title="Tab">
            <Items>
                <ext:Panel runat="server" Width="3000" Height="3000" />
            </Items>
            <Listeners>
                <Resize Fn="onResize" />
            </Listeners>
        </ext:Container>
    </Items>
</ext:TabPanel>

**majunior** · Jun 22, 2011, 12:21 PM

Originally Posted by Daniil

Yes, looks good.

Regarding scrolling.

I guess you need something like this:

Example

<script type="text/javascript">
    var onResize = function() {
        this.setAutoScroll(this.getWidth() < 950);
    }
</script>

<ext:TabPanel runat="server">
    <Items>
        <ext:Container runat="server" Title="Tab">
            <Items>
                <ext:Panel runat="server" Width="3000" Height="3000" />
            </Items>
            <Listeners>
                <Resize Fn="onResize" />
            </Listeners>
        </ext:Container>
    </Items>
</ext:TabPanel>

But I need to set the panel size?
Because I want my screen to fit any screen resolution.

**Daniil** · Jun 22, 2011, 12:30 PM

Not sure that there is a good solution.

What will be the content of that panel?

**majunior** · Jun 22, 2011, 12:40 PM

Originally Posted by Daniil

Not sure that there is a good solution.

What will be the content of that panel?

What do I need on this page is the structure below.
In the northern region will have the menus
In the West region will have 2 panels that help the system
Center in the region will have a TabPanel which receives the other pages.

Attached is a print of implementation.

<ext:BorderLayout ID="BorderLayout1" runat="server">
                        <North Split="true" MarginsSummary="5 5 0 5" MinHeight="73px" MaxHeight="73px">
                            <ext:Panel ID="Panel1" runat="server" MinHeight="73px" MaxHeight="73px" Height="73px"
                                Cls="CssExtPainelTop">
                                <Content>
                                    <div class="divFundoMenu1">
                                    </div>
                                    <div class="divFundoMenu2">
                                    </div>
                                    <div class="divLogoMenu">
                                    </div>
                                </Content>
                            </ext:Panel>
                        </North>
                        <West Collapsible="true" Split="true" MinHeight="210px" MinWidth="130px" MaxWidth="500px"
                            MarginsSummary="0 0 5 5" CMarginsSummary="5 5 5 5" UseSplitTips="True" ExpandableSplitTip="Exibe o painel lateral"
                            SplitTip="Splitxxx" CollapsibleSplitTip="Altera largura do painel lateral">
                            <ext:Panel ID="pnlMenu2" runat="server" Title="" MinHeight="200px" MinWidth="130px"
                                Cls="CssExtPainelMenuTreeView" MaxWidth="500px" Width="184px">
                                <Items>
                                </Items>
                            </ext:Panel>
                        </West>
                        <Center MarginsSummary="0 5 5 0">
                            <ext:TabPanel ID="TabPanelPages" runat="server" EnableTabScroll="true" Cls="CssExtTabPages"
                                MinHeight="240px" LabelPad="5" HideMode="Offsets">
                                <Items>
                                </Items>
                            </ext:TabPanel>
                        </Center>
                    </ext:BorderLayout>

**Daniil** · Jun 22, 2011, 1:51 PM

Thanks, it's clear, but I asked about tabs content.

Ragarding to

But I need to set the panel size?

I just set size to demonstrate that it works.

But, generally speaking, scrolling implies fixed size.

Thread: [CLOSED] Minimum size of a page

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] ext:GridPanel: Calculated page size

[CLOSED] Huge page size from comboboxes

[CLOSED] PagingToolbar - save page size

[CLOSED] How Can I get the page size that is loaded from a panel?

[CLOSED] page size selector

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Minimum size of a page

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us