[CLOSED] ViewPort is not resizing inner panel

[RCM]

Hello,

I laid a viewport in site.master file and have two Panels defined in it. And I am loading panel content by specifying Loader item. Please see the below code snip:

<ext:Viewport ID="TheViewPoint" EnableTheming="True" runat="server" IDMode="Explicit"  Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Region="North" ID="ContentPanel" MinHeight="200" IDMode="Explicit" >
                <Loader ID="Loader1" runat="server" Url="/Personalize/UserSetting/GetTopLevelMenu" Scripts="true"></Loader>         
            </ext:Panel>  

            <ext:Panel runat="server" Region="Center">
                <Items>
                    <ext:Label runat="server" Text="test label"></ext:Label>
                </Items>
            </ext:Panel>
        <Items>
</ext:Viewport>

The loader is loading a toolbar and a tabpanel from a ascx file. When I run it, the page is rendered properly. But, resizing my IE window is not causing viewport to resize the inner two panel content properly.

Can you please shed some light on the issue. Many thanks!

Regards,
Xiaogang

Update: I notified that the content inside the ascx file is not rendered at the first launch of the page. I have to resize my IE window, after than I am able to see the rendered content, but, still with some render problem.

So, my question becomes that if the "loader" way in my case is recommended or it is still buggy?

Thanks.

[Vladimir]

Where ViewPort is located? How master page is configured? How do you render user control? How user control is configured?

Please post test sample which we can test locally

So, my question becomes that if the "loader" way in my case is recommended or it is still buggy?

Loader is good way to load dynamic widgets, please see
https://examples2.ext.net/#/Loaders/...ON_WebService/

[RCM]

Where ViewPort is located? How master page is configured? How do you render user control? How user control is configured?

Please post test sample which we can test locally


Loader is good way to load dynamic widgets, please see
https://examples2.ext.net/#/Loaders/...ON_WebService/

Below is the ascx file:

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%--ResourceManager ID must be the same as in parent page--%>
<ext:ResourceManager ID="MasterResourceManager" runat="server" RenderScripts="None" />
<ext:Toolbar ID="MainToolBar" runat="server">
    <Items>
        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
        <ext:ToolbarSeparator ID="ToolbarMaintenanceModeSeparator" runat="server" />
        <ext:Button ID="ProfileMenu" IDMode="Explicit" TabIndex="10" Cls="buttonMarginCSS"
            runat="server" Icon="StatusOnline" Text='<%# Page.User.Identity.Name %>' AutoDataBind="true">
            <Menu runat="server">
                <ext:Menu ID="Menu1" runat="server">
                    <Items>
                        <ext:MenuItem Text="<%$ Resources:WebResources|Security.FormLabels, ChangePassword %>"
                            Icon="LockEdit" ID="mnChangePassword">
                            <Listeners>
                                <Click Handler="Monitor.ShowChangePassword()" />
                            </Listeners>
                        </ext:MenuItem>
                        <ext:MenuItem Text="<%$ Resources:WebResources|Security.FormLabels, UserSettings %>"
                            Icon="UserEdit" ID="mnUserSetting">
                            <Listeners>
                                <Click Handler="Monitor.ShowUserSetting()" />
                            </Listeners>
                        </ext:MenuItem>
                        <ext:CheckMenuItem ID="MaintenanceModeMenuItem" Text="<%$ Resources:WebResources|Security.FormLabels, MaintenanceMode %>">
                            <Listeners>
                                <CheckChange Handler="Monitor.InitiateMaintenanceMode(item, checked)" />
                            </Listeners>
                        </ext:CheckMenuItem>
                        <ext:MenuItem Text="<%$ Resources:WebResources|Security.FormLabels, MaintenanceMode %>"
                            ID="MaintenanceModeMenuItemNotActivated">
                            <Listeners>
                                <Click Handler="Monitor.InitiateMaintenanceMode(item,true)" />
                            </Listeners>
                        </ext:MenuItem>
                    </Items>
                </ext:Menu>
            </Menu>
            <Listeners>
                <Click Handler="Monitor.MenuClicked(item, e)" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="BtnHelp" Text='Help' runat="server" />
        <ext:Button ID="BtnLogout" Text='Logout' runat="server" />
    </Items>
</ext:Toolbar>
<ext:TabPanel runat="server" MinTabWidth="150" MinHeight="70" AutoScroll="True" ID="MainTabPanel">
    <Items>
        <ext:Panel runat="server" MinHeight="45" BodyCls="TopMenuPanelBody" Title="<%$ Resources:WebResources|Home.FormLabels, Dashboard %>"
            ID="TabDashboard">
            <Items>
                <ext:ImageButton ID="ImageButton1" Href='@Url.Action("ListPage","WebDesign")' ImageUrl="/Resource/Images/Grid_View.png"
                    runat="server" />
                <ext:ImageButton ID="ImageButton2" Href='@Url.Action("ListPage","WebDesign")' ImageUrl="/Resource/Images/List_View.jpg"
                    runat="server" />
                <ext:ImageButton ID="ImageButton3" Href='@Url.Action("ListPage","WebDesign")' ImageUrl="/Resource/Images/Detail_View.jpg"
                    runat="server" />
                <ext:ImageButton ID="ImageButton4" Href='@Url.Action("ListPage","WebDesign")' ImageUrl="/Resource/Images/Workflow_View.jpg"
                    runat="server" />
            </Items>
        </ext:Panel>
        <ext:Panel Visible="False" runat="server" MinHeight="45" BodyCls="TopMenuPanelBody"
            Title="<%$ Resources:WebResources|Home.FormLabels, WorkItem %>" ID="TabWorkItem">
            <Items>
            </Items>
        </ext:Panel>
        <ext:Panel runat="server" MinHeight="45" BodyCls="TopMenuPanelBody" Title="<%$ Resources:WebResources|Home.FormLabels, Report %>"
            ID="TabReport">
            <Items>
            </Items>
        </ext:Panel>
        <ext:Panel runat="server" MinHeight="45" BodyCls="TopMenuPanelBody" Title="<%$ Resources:WebResources|Home.FormLabels, WorkFlow %>"
            ID="TabWorkFlow">
            <Items>
            </Items>
        </ext:Panel>
        <ext:Panel runat="server" MinHeight="45" BodyCls="TopMenuPanelBody" Title="<%$ Resources:WebResources|Home.FormLabels, Configure %>"
            ID="TabConfigure">
            <Items>
            </Items>
        </ext:Panel>
        <ext:Panel runat="server" MinHeight="45" BodyCls="TopMenuPanelBody" Title="<%$ Resources:WebResources|Home.FormLabels, Solution %>"
            ID="TabSolution">
            <Items>
            </Items>
        </ext:Panel>
    </Items>
</ext:TabPanel>

Below is Master file:

    <ext:Viewport ID="TheViewPoint" EnableTheming="True" runat="server" IDMode="Explicit"  Layout="BorderLayout">
        <Items>
            <ext:Panel runat="server" Region="North" ID="ContentPanel" MinHeight="100" IDMode="Explicit" >
                <Loader ID="Loader1" runat="server" Url="/Personalize/UserSetting/GetTopLevelMenu" Scripts="true"></Loader>   
            </ext:Panel>
            </Items>
    </ext:Viewport>

After get rendered, I noticed there have two issues:
1. Resizing IE doesn't get Viewport content resized.
2. TabPanel content doesn't get rendered properly; I suppose to see four image buttons on the TabDashboard tab, but I am seeing 3 of them.

Thanks,
Xiaogang

[Daniil]

Please wrap the code in [CODE ] tags using the "Edit Post" button, please see #3:
More Information Required

[RCM]

Please wrap the code in [CODE ] tags using the "Edit Post" button, please see #3:
More Information Required

Any progress?

[Daniil]

Thanks for editing the post.

Well, you have not set up any layout for the north Panel. Though, even you would set up some layout, it won't work, because when the page is loaded via Loader with default

Mode="Html"

the loaded content does not participate in the layout page of the container.

I would suggest you to use VBoxLayout and UserControlLoader.

Example View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net.MVC v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel 
                runat="server" 
                Region="North" 
                Title="North" 
                Height="200" 
                Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                    <ext:UserControlLoader runat="server" Path="~/Views/Test/PartialView1.ascx" />
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Region="Center" Title="Center" />
        </Items>
    </ext:Viewport>
</body>
</html>

Example Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Toolbar runat="server" Height="25">
    <Items>
        <ext:Button runat="server" Text="Some button" />
    </Items>
</ext:Toolbar>

<ext:TabPanel runat="server" Flex="1">
    <Items>
        <ext:Panel runat="server" Title="Tab 1" />
        <ext:Panel runat="server" Title="Tab 2" />
    </Items>
</ext:TabPanel>

[RCM]

Thank you Daniil, your solution looks working. Thank you.