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>