[CLOSED] [RAZOR] Using viewport to make panel fit available browser window

  1. #1

    [CLOSED] [RAZOR] Using viewport to make panel fit available browser window

    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(
                    ...
    Last edited by Daniil; Jun 26, 2012 at 10:22 PM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    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
  4. #4
    Please re-read:

    Quote Originally Posted by Daniil View Post
    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:
    https://examples2.ext.net/#/Loaders/.../Http_Handler/
    https://examples2.ext.net/#/Loaders/...ON_WebService/

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

    Also please review the MVC Examples:
    http://forums.ext.net/showthread.php...ll=1#post83329

Similar Threads

  1. [CLOSED] [Razor] Setup Auto load panel in razor
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2012, 11:54 AM
  2. [CLOSED] Problem with Gridpanel and Viewport on browser resize
    By John_Writers in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 10, 2011, 11:44 AM
  3. [CLOSED] Preventing a window moved with header outside browser window
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 22, 2010, 1:17 PM
  4. Replies: 11
    Last Post: Apr 08, 2010, 2:36 PM
  5. Replies: 4
    Last Post: Feb 23, 2010, 8:38 AM

Tags for this Thread

Posting Permissions