PDA

View Full Version : [CLOSED] Portal example adjustment



CarWise
Nov 19, 2013, 12:53 PM
Hi guys,

I need some info how to achieve the following. In my application I'm using the basic Portal example. My customer wants to have an extra panel in the current layout. I'm not really sure how to achieve it. Ive tried several things (Hbox layout for example) but the layout became messed up.

Can you point me to the right direction using the following example code ? It's probably a simple things :)

Ive attached an image what I would like to achieve:



<%@ 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="BorderLayout">
<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>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Thanks,

Martin

Daniil
Nov 19, 2013, 5:27 PM
Hi Martin,

Put the current West region into a new Panel with VBoxLayout. That new Panel is going to be a West region. Put the SouthWest into that new Panel.

Hope this helps.

CarWise
Nov 21, 2013, 8:05 AM
Thanks...will look into that..

I've tried that before, and the accordion got messed up. But will try again :)

Martin

Daniil
Nov 21, 2013, 1:52 PM
Ok. If it doesn't work for you again, please post a sample with your trial code included.