PDA

View Full Version : [CLOSED] [RAZOR] Using viewport to make panel fit available browser window



gets_gui
Jun 20, 2012, 2:47 PM
Hi

I'm trying to layout my application so the panels resize dynamically based on the size of the browser window. I've tried to use the ViewPort (with LayoutType.Fit) to encapsulate my controls, however this caused the Panel the take up the complete browser window.

_Layout.chstml (Displays components from _Control1.cshtml and index.cshtml)



...
<div id="search">
@Html.Partial("_Control1") --> _Control1.cshtml
</div>
<div id="main">
@RenderBody() --> index.cshtml
</div>
...


_Control1.cshtml


Html.X().ViewPort()
.Layout(LayoutType.Fit)
.Items(items =>
items.Add(Html.X().FormPanel()
.ID("formPanel")
.Title("formPanel")
.Collapsible(true)
.Layout(LayoutType.HBox)
.Items(items =>
{
items.Add(Html.X().Panel()
.ID("catePanel")
.Title("Date")
.Closable(true)
.CloseAction(CloseAction.Hide)
...


index.cshtml



<h2>@ViewBag.Title</h2>
@(
Html.X().ViewPort()
.Layout(LayoutType.Fit)
.Items(items =>
items.Add(Html.X().TabPanel()
.ID("TabPanel")
.Title("TabPanel")
.Add(Html.X().Panel()
.ID("Summary")
.Title("Summary")
.Split(true)
.Layout(Ext.Net.LayoutType.Accordion)
.Add(Html.X().Panel()
.ID("InnerSummaryPanel")
.Title("Inner Summary")
.Layout(Ext.Net.LayoutType.Fit)
.Add(Html.X().GridPanel(
...

Daniil
Jun 20, 2012, 8:08 PM
Hi,

Viewport must be a single and top level container on the page placed directly in page <body> (or, maybe, in a top level <form>).

So, placing it into a <div> is wrong by design.

Please provide a mockup of the required layout. We will suggest something.

gets_gui
Jun 22, 2012, 3:09 PM
Hi Danii

I've incorporated a Viewport at the _Layout.cshtml level now, the intial page renders now but when I try and use the @Html.ActionLink I get an error "An item with the same key has already been added."



<body>
@Html.X().ResourceManager()
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
Welcome <strong>@User.Identity.Name</strong>!
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("View2", "Index", "View2")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
@(
Html.X().Viewport()
.ID("ViewPort")
.Layout(Ext.Net.LayoutType.Fit)
.Items(items =>
{
items.Add(Html.X().FormPanel()
.ID("sharedFormPanel")
.Title("Search Parameters")
.Collapsible(true)
.Height(90)
.ItemsFromPage(this, "~/Views/Shared/_SharedControl.cshtml"));
items.Add(Html.X().FormPanel()
.Height(100)
.Html(RenderBody().ToHtmlString())
);
})
)

<div id="footer">
</div>
</div>
</body>
</html>


I've tried using a .Content(...) method to render the view which does generate the correct HTML code between <DIV> tags however its adding a class="x-hidden"> property which I cant remove



<div id="id987129ec3313dedb_Content" class="x-hidden">
&lt;h2&gt;Welcome to ASP.NET MVC!&lt;/h2&gt;
&lt;p&gt;
To learn more about ASP.NET MVC visit &lt;a href=&quot;http://asp.net/mvc&quot; title=&quot;ASP.NET MVC Website&quot;&gt;http://asp.net/mvc&lt;/a&gt;.
&lt;/p&gt;
</div>


I want to be able to use the RenderBody() method to handling switching between different views. Can you advise on the best approach

Thanks

Daniil
Jun 22, 2012, 4:18 PM
Please re-read:



Viewport must be a single and top level container on the page placed directly in page <body> (or, maybe, in a top level <form>).

So, placing it into a <div> is wrong by design.


This one

Html.X().FormPanel()
.Height(100)
.Html(RenderBody().ToHtmlString()
doesn't make sense, because the FormPanel is designed to be used with Items only.

Also

.Layout(Ext.Net.LayoutType.Fit)
supports only a single item, you add two ones.

To load Ext.NET components dynamically we would recommend to use Loader:
http://examples2.ext.net/#/Loaders/Component/Http_Handler/
http://examples2.ext.net/#/Loaders/Component/JSON_WebService/

It's possible to use with controller actions as well. Here is the example.
http://forums.ext.net/showthread.php?19603&p=84459&viewfull=1#post84459

Also please review the MVC Examples:
http://forums.ext.net/showthread.php?19338&p=83329&viewfull=1#post83329