PDA

View Full Version : [CLOSED] Portal Layout



PriceRightHTML5team
Jul 19, 2013, 5:38 PM
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


6578

Baidaly
Jul 20, 2013, 12:59 AM
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>

PriceRightHTML5team
Jul 25, 2013, 3:14 PM
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(ResourceLoc ationType.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>

Baidaly
Jul 26, 2013, 4:46 AM
A specialized container representing the viewable application area (the browser viewport) from http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.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);
})))))))

Baidaly
Jul 26, 2013, 9:28 PM
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?