[CLOSED] Portal Layout

  1. #1

    [CLOSED] Portal Layout

    I added the basic Portal example to my page and it takes up the entire screen overflowing and covering my menu and footer.

    I've tried several different layout types.

    How do I configure the portal with sidebar and tabs to all fit properly within my page?

    Thanks,
    Rob


    Click image for larger version. 

Name:	portal1.png 
Views:	30 
Size:	53.6 KB 
ID:	6578
    Last edited by Daniil; Aug 01, 2013 at 3:48 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Can you provide a sample to reproduce. I've tried the following sample and it works:

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="Ext.Net.Utilities" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";
    
                this.ResourceManager1.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text));
    
                foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
                {
                    portlet.Html = "={text}";
                    portlet.BodyPadding = 5;
                    portlet.CloseAction = CloseAction.Hide;
                }
            }
    
            foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
            {
                portlet.DirectEvents.Hide.Event += Portlet_Hide;
                portlet.DirectEvents.Hide.EventMask.ShowMask = true;
                portlet.DirectEvents.Hide.EventMask.Msg = "Saving...";
                portlet.DirectEvents.Hide.EventMask.MinDelay = 500;
                
                portlet.DirectEvents.Hide.ExtraParams.Add(new Ext.Net.Parameter("ID", portlet.ClientID));
            }
        }
    
        protected void Portlet_Hide(object sender, DirectEventArgs e)
        {
           X.Msg.Alert("Status", e.ExtraParams["ID"] + " Hidden").Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Portal in TabPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" /> 
        
        <style>
            .x-column-padding{
                padding : 10px 0px 10px 10px;
            }
            
            .x-column-padding1{
                padding : 10px;
            }
        </style>  
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Viewport runat="server" Layout="Fit">
                <Items>
                    <ext:Panel runat="server" Layout="Border">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Button"></ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:Panel 
                                runat="server"
                                Region="West"
                                Title="West" 
                                Width="200"
                                Collapsible="true" 
                                Split="true" 
                                MinWidth="175" 
                                MaxWidth="400" 
                                MarginSpec="5 0 5 5" 
                                Layout="AccordionLayout">
                                          
                                <Items>
                                    <ext:Panel 
                                        runat="server" 
                                        Border="false" 
                                        Collapsed="true" 
                                        Icon="Note"
                                        AutoScroll="true"
                                        Title="Content"
                                        Html="={text}"
                                        BodyPadding="5"
                                        />
                                    <ext:Panel
                                        runat="server" 
                                        Border="false" 
                                        Collapsed="true" 
                                        Icon="FolderWrench" 
                                        AutoScroll="true"
                                        Title="Settings"
                                        Html="={text}"
                                        BodyPadding="5"
                                        />
                                </Items>
                            </ext:Panel>
                            <ext:TabPanel 
                                runat="server" 
                                Region="Center"
                                ActiveTabIndex="0" 
                                Title="TabPanel"
                                MarginSpec="5 5 5 0">
                                <Items>
                                    <ext:Panel runat="server" Title="Tab 1" Layout="Fit">
                                        <Items>
                                            <ext:Portal runat="server" Border="false">
                                                <Items>
                                                    <ext:PortalColumn 
                                                        runat="server"
                                                        Cls="x-column-padding">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet1" runat="server" Title="Another Panel 1" Icon="Accept" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                    <ext:PortalColumn 
                                                        runat="server" 
                                                        Cls="x-column-padding">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet2" runat="server" Title="Panel 2" />
                                                            <ext:Portlet ID="Portlet3" runat="server" Title="Another Panel 2" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                    <ext:PortalColumn 
                                                        runat="server" 
                                                        Cls="x-column-padding1">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet4" runat="server" Title="Panel 3" />
                                                            <ext:Portlet ID="Portlet5" runat="server" Title="Another Panel 3" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                </Items>
                                            </ext:Portal>
                                        </Items>
                                    </ext:Panel>
                                    <ext:Panel runat="server" Title="Tab 2" Layout="Fit">
                                        <Items>
                                            <ext:Portal runat="server" Border="false">
                                                <Items>
                                                    <ext:PortalColumn 
                                                        runat="server" 
                                                        Cls="x-column-padding">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet7" Title="Another Panel 3" runat="server" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                    <ext:PortalColumn 
                                                        runat="server" 
                                                        Cls="x-column-padding">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet8" Title="Panel 2" runat="server" />
                                                            <ext:Portlet ID="Portlet9" Title="Another Panel 2" runat="server" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                    <ext:PortalColumn 
                                                        runat="server" 
                                                        Cls="x-column-padding1">
                                                        <Items>
                                                            <ext:Portlet ID="Portlet10" Title="Another Panel 1" runat="server" />
                                                        </Items>
                                                    </ext:PortalColumn>
                                                </Items>
                                            </ext:Portal>  
                                        </Items>                                  
                                    </ext:Panel>
                                </Items>
                            </ext:TabPanel> 
                            <ext:Panel runat="server" Region="South" Title="Footer" Height="100"></ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  3. #3
    Here are two ways to replicate the problem

    Create an new MVC application with default _Layout.cshtml, add Dashboard to a new view, here it doesn't display well with the content area.

    Attempt to contain the dashboard in a div, code example below.

    I want to use all the features like the sidebar and tabs. My container is appx 900px X 750px for example. How do I accomplish this?

    
    @using Ext.Net
    @using Ext.Net.MVC
    
    @{
        ViewBag.Title = "Dashboard";
        Layout = "~/Views/Shared/_LayoutBlank.cshtml";
        //Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <style>
        .x-column-padding {
            padding: 10px 0px 10px 10px;
        }
    
        .x-column-padding1 {
            padding: 10px;
        }
    </style>
    
    <script type="text/javascript">
        var text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";
    </script>
    
    @functions 
    {
        private void InitPortlet(Portlet portlet)
        {
            portlet.Html = "={text}";
            portlet.BodyPadding = 5;
            portlet.CloseAction = CloseAction.Hide;
    
            portlet.DirectEvents.Hide.Action = "PortletHide";
            portlet.DirectEvents.Hide.EventMask.ShowMask = true;
            portlet.DirectEvents.Hide.EventMask.Msg = "Saving...";
            portlet.DirectEvents.Hide.EventMask.MinDelay = 500;
    
            // portlet.DirectEvents.Hide.ExtraParams.Add(new { id = portlet.ClientID });
        }
    }
    
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
    
    
    <div class="dashboard-container" style="max-width: 900px; max-height: 500px; border: 5px solid #000; overflow: scroll;">
        @(Html.X().Viewport()
                .Layout(LayoutType.Border)
                .Items(
                    Html.X().Panel()
                        .Region(Region.West)
                        .Title("West")
                        .Width(200)
                        .Collapsible(true)
                        .Split(true)
                        .MinWidth(175)
                        .MaxWidth(400)
                        .MarginSpec("5 0 5 5")
                        .Layout(LayoutType.Accordion)
                        .Items(
                            Html.X().Panel()
                                .Collapsed(true)
                                .Icon(Icon.Note)
                                .AutoScroll(true)
                                .Title("Content")
                                .Html("={text}")
                                .BodyPadding(5),
    
                            Html.X().Panel()
                                .Collapsed(true)
                                .Icon(Icon.FolderWrench)
                                .AutoScroll(true)
                                .Title("Settings")
                                .Html("={text}")
                                .BodyPadding(5)
                        ),
    
                   Html.X().TabPanel()
                        .Region(Region.Center)
                        .Title("TabPanel")
                        .MarginSpec("5 5 5 0")
                        .Items(
                            Html.X().Panel()
                                .Title("Tab 1")
                                .Layout(LayoutType.Fit)
                                .Items(
                                    Html.X().Portal()
                                        .Items(
                                            Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet1")
                                                        .Title("Another Panel 1")
                                                        .Icon(Icon.Accept)
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })
                                                ),
    
                                            Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet2")
                                                        .Title("Panel 2")
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        }),
    
                                                    Html.X().Portlet()
                                                        .ID("Portlet3")
                                                        .Title("Another Panel 2")
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })
                                                ),
    
                                             Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet4")
                                                        .Title("Panel 3")
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        }),
    
                                                    Html.X().Portlet()
                                                        .ID("Portlet5")
                                                        .Title("Another Panel 3")
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })
                                                )
                                        )
                                ),
    
                           Html.X().Panel()
                                .Title("Tab 2")
                                .Layout(LayoutType.Fit)
                                .Items(
                                    Html.X().Portal()
                                        .Items(
                                            Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet7")
                                                        .Title("Another Panel 3")
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })
                                                ),
    
                                            Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet8")
                                                        .Title("Panel 2")
                                                        .Icon(Icon.Accept)
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        }),
    
                                                    Html.X().Portlet()
                                                        .ID("Portlet9")
                                                        .Title("Another Panel 2")
                                                        .Icon(Icon.Accept)
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })
                                                ),
    
                                             Html.X().PortalColumn()
                                                .Cls("x-column-padding")
                                                .Items(
                                                    Html.X().Portlet()
                                                        .ID("Portlet10")
                                                        .Title("Another Panel 1")
                                                        .Icon(Icon.Accept)
                                                        .Control(portlet =>
                                                        {
                                                            this.InitPortlet(portlet);
                                                        })))))))
    </div>
  4. #4
    A specialized container representing the viewable application area (the browser viewport)
    from http://docs.sencha.com/extjs/4.2.1/#...ainer.Viewport

    Instead of Viewport you should use Panel with required paddings:

    @(Html.X().Panel()
    		.Height(900)
    		.PaddingSpec("200 0 200 0")
    		.Layout(LayoutType.Border)
    		.Items(
    			Html.X().Panel()
    				.Region(Region.West)
    				.Title("West")
    				.Width(200)
    				.Collapsible(true)
    				.Split(true)
    				.MinWidth(175)
    				.MaxWidth(400)
    				.MarginSpec("5 0 5 5")
    				.Layout(LayoutType.Accordion)
    				.Items(
    					Html.X().Panel()
    						.Collapsed(true)
    						.Icon(Icon.Note)
    						.AutoScroll(true)
    						.Title("Content")
    						.Html("={text}")
    						.BodyPadding(5),
    
    					Html.X().Panel()
    						.Collapsed(true)
    						.Icon(Icon.FolderWrench)
    						.AutoScroll(true)
    						.Title("Settings")
    						.Html("={text}")
    						.BodyPadding(5)
    				),
    
    		   Html.X().TabPanel()
    				.Region(Region.Center)
    				.Title("TabPanel")
    				.MarginSpec("5 5 5 0")
    				.Items(
    					Html.X().Panel()
    						.Title("Tab 1")
    						.Layout(LayoutType.Fit)
    						.Items(
    							Html.X().Portal()
    								.Items(
    									Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet1")
    												.Title("Another Panel 1")
    												.Icon(Icon.Accept)
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})
    										),
    
    									Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet2")
    												.Title("Panel 2")
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												}),
    
    											Html.X().Portlet()
    												.ID("Portlet3")
    												.Title("Another Panel 2")
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})
    										),
    
    									 Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet4")
    												.Title("Panel 3")
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												}),
    
    											Html.X().Portlet()
    												.ID("Portlet5")
    												.Title("Another Panel 3")
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})
    										)
    								)
    						),
    
    				   Html.X().Panel()
    						.Title("Tab 2")
    						.Layout(LayoutType.Fit)
    						.Items(
    							Html.X().Portal()
    								.Items(
    									Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet7")
    												.Title("Another Panel 3")
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})
    										),
    
    									Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet8")
    												.Title("Panel 2")
    												.Icon(Icon.Accept)
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												}),
    
    											Html.X().Portlet()
    												.ID("Portlet9")
    												.Title("Another Panel 2")
    												.Icon(Icon.Accept)
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})
    										),
    
    									 Html.X().PortalColumn()
    										.Cls("x-column-padding")
    										.Items(
    											Html.X().Portlet()
    												.ID("Portlet10")
    												.Title("Another Panel 1")
    												.Icon(Icon.Accept)
    												.Control(portlet =>
    												{
    													this.InitPortlet(portlet);
    												})))))))
  5. #5
    I assume it doesn't work for you. Can you say what exactly is wrong? On my machine I see the panel with padding. I think you didn't provide mentioned top menu and bottom panel. Is it possible to provide them too?

Similar Threads

  1. [CLOSED] Portal Layout Resize Issues
    By Patrick_G in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 18, 2013, 3:50 AM
  2. [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
  3. [CLOSED] [1.0] Portal with Layout="Table"
    By betamax in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 16, 2010, 4:02 PM
  4. [CLOSED] Basic Layout question for Layout Fit / AutoHeight
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2010, 11:57 AM
  5. [CLOSED] [1.0] Border Layout/Portal issue
    By state in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 22, 2010, 3:01 AM

Posting Permissions