What's New?

Stretching a Portal

  1. #1
    Jul 12, 2012, 7:41 PM

    Stretching a Portal

    Hello, I am working on getting Ext.Net purchased for our company and will post to the premium once that is in place. You folks created a fantastic library.

    In the meantime, I am having troubles with a layout issue within a Portal. I have dug through many similiar examples and gotten close to what I need. What I need is when the browser loads, for the portal to take up 100% of the screen (vertically and horizontally) and the have the Portal Column take up 100% vertically and then have the Portlets take up a percentage height of that.

    I can get it work when I specify an absolute height on the Portal Column, but I cant seem to find a way to have the Portal Column stretch to take up 100%.

    Here is the example that I have that works. However, if I take out the Height="500" on the Portal Column. It does not work.

    Any help you can provide would be greatly appreciated. Thank you.

    
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                <ext:Portal ID="Portal1" runat="server" Layout="VBoxLayout" >
                    <LayoutConfig>
                        <ext:VBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>
                        <ext:PortalColumn ID="PortalColumn1" runat="server" Layout="VBoxLayout" ColumnWidth="0.3" Height="500" >
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>                                
                                <ext:Portlet ID="portletA" runat="server" Title="Portlet A" Flex="1">
                                </ext:Portlet>
                                <ext:Portlet ID="portletB" runat="server" Title="Portlet B" Flex="2">
                                </ext:Portlet>
                            </Items>
                        </ext:PortalColumn>
                        <ext:PortalColumn ID="PortalColumn2" runat="server" Layout="VBoxLayout" ColumnWidth="0.7" Height="500">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>                                
                                <ext:Portlet ID="portletC" runat="server" Title="Portlet C" Flex="1">
                                </ext:Portlet>
                                <ext:Portlet ID="portletD" runat="server" Title="Portlet D" Flex="2">
                                </ext:Portlet>
                            </Items>
                        </ext:PortalColumn>
                    </Items>
                </ext:Portal>
            </Items>
        </ext:Viewport>
    </form>
</body>
  2. #2
    Jul 13, 2012, 5:09 AM
    This should do it. Merry Christmas. 

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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<!DOCTYPE html>
    
<html>
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Viewport runat="server" Layout="FitLayout">
            <Items>
                <ext:Portal runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:PortalColumn runat="server" Layout="VBoxLayout" Flex="1">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>                                
                                <ext:Portlet runat="server" Title="Portlet A" Flex="1" />
                                <ext:Portlet runat="server" Title="Portlet B" Flex="2" />
                            </Items>
                        </ext:PortalColumn>
                        <ext:PortalColumn runat="server" Layout="VBoxLayout" Flex="2">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>                                
                                <ext:Portlet runat="server" Title="Portlet C" Flex="1" />
                                <ext:Portlet runat="server" Title="Portlet D" Flex="2" />
                            </Items>
                        </ext:PortalColumn>
                    </Items>
                </ext:Portal>
            </Items>
        </ext:Viewport>
    </form>
</body>
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Jul 16, 2012, 9:39 PM

    Stretching a Portal

    Thank you Geoffrey. This worked great. However, in my earnestness to simplify the example, I left out some components in the layout that still makes things skewed.

    I am trying to get a tool bar above the Portal but the tool bar then causes the Portal to be pushed down the height of the tool bar so that a vertical scroll bar appears in the browser. The closest I have come is to put the tool bar in the Top Bar of the Portal but it still causes the vertical scroll bar.

    Is there a way I can add a tool bar above the Portal and still have the Portal stretch without scroll bars appearing in the browser?

    Here is my current markup:

    Thank you for your help.

            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
            <Items>
                <ext:Portal ID="Portal1" runat="server" Layout="HBoxLayout"> 
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:LinkButton ID="LinkButton4" runat="server" Text="Open"/>            
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Items>
                        <ext:PortalColumn ID="PortalColumn1" runat="server" Layout="VBoxLayout" Flex="1">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Portlet ID="Portlet1" runat="server" Title="Portlet A" Flex="1" />
                                <ext:Portlet ID="Portlet2" runat="server" Title="Portlet B" Flex="1" />
                            </Items>
                        </ext:PortalColumn>
                        <ext:PortalColumn ID="PortalColumn2" runat="server" Layout="VBoxLayout" Flex="1">
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:Portlet ID="Portlet3" runat="server" Title="Portlet C" Flex="1" />
                                <ext:Portlet ID="Portlet4" runat="server" Title="Portlet D" Flex="1" />
                            </Items>
                        </ext:PortalColumn>
                    </Items>
                </ext:Portal>
            </Items>
        </ext:Viewport>

Similar Threads

  1. ext:DateField isn't stretched when stretching the page
    By rach in forum 1.x Help
    Replies: 0
    Last Post: Aug 14, 2012, 2:59 PM
  2. Stretching desktop wallpaper
    By feanor91 in forum 1.x Help
    Replies: 0
    Last Post: Jan 19, 2012, 10:15 AM
  3. Master Page with ContentPlaceHolder: FitLayout Content not stretching vertically
    By Olivier in forum 1.x Help
    Replies: 3
    Last Post: Nov 30, 2011, 10:39 AM
  4. [CLOSED] [1.0]Moving Portlet from Portal to Portal
    By betamax in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 21, 2010, 11:47 AM
  5. [EXAMPLE] Portal
    By geoffrey.mcgill in forum Examples and Extras
    Replies: 3
    Last Post: Jun 29, 2009, 8:17 PM

Tags for this Thread

Posting Permissions