Hello!

I need to dynamically load user control within TabPanel which is located within centered ViewPort.
Once user control is loaded it appears within tab, but it is not properly positioned:
Click image for larger version. 

Name:	20.09WronUCPosition.jpg 
Views:	27 
Size:	44.5 KB 
ID:	6919

Please see source code.
Default.aspx:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    UserControl currentUC1;
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!string.IsNullOrWhiteSpace(CurrentControl.Text))
        {
            this.LoadUserControl(CurrentControl.Text, CurrentControl, currentUC1, PanelUC);
        }
    }

    private void LoadUserControl(string num, Hidden hidden, UserControl uc, Ext.Net.Panel targetPanel, bool update = false)
    {
        if (update && uc != null)
        {
            targetPanel.ContentControls.Clear();
        }

        uc = (UserControl)this.LoadControl(string.Format("UserControl{0}.ascx", num));
        uc.ID = "UC" + num;
        targetPanel.ContentControls.Add(uc);
        
        if (update)
        {
            hidden.Text = num;
            targetPanel.UpdateContent();
        }
    }

    private void ShowTab()
    {
        tpControls.ShowTab(PanelUC);
    }

    private void ButtonShowTabAndLoadControl_Click(object sender, DirectEventArgs e)
    {
        ShowTab();
        LoadUserControl("1", CurrentControl, currentUC1, PanelUC, true);
    }

</script>

<!DOCTYPE html>

<html>
    <head runat="server">
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <form>
            <ext:ViewPort runat="server"  >
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
                </LayoutConfig>
                <Items>
                    <ext:Hidden ID="CurrentControl" runat="server" />
                    <ext:Button 
                        ID="ButtonShowTabAndLoadControl" 
                        runat="server" 
                        Text="Show Tab AND Load User Control"
                        OnDirectClick="ButtonShowTabAndLoadControl_Click" 
                        />
                    <ext:Panel ID="PanelBorderLayout" runat="server"
                        Width="1200"
                        Height="800"
                        Layout="BorderLayout">
                        <Items>
                            <ext:Panel runat="server" Region="North" 
                                Title="North (default height=50)"
                                Height="50"
                                Split="True"
                                Closable="True">
                            </ext:Panel>
                            <ext:Panel runat="server" Region="West" 
                                Title="West (defaultwidth=200)"
                                Width="200"
                                MaxWidth="400" 
                                Split="true" 
                                Closable="True">
                            </ext:Panel>
                            <ext:TabPanel runat="server" ID="tpControls" Region="Center" />        
                            
                            <ext:Panel 
                                Hidden="True"
                                ID="PanelUC" 
                                runat="server" 
                                Title="User Control1" 
                                Width="500" 
                                Height="700">
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:ViewPort>
        </form>
    </body>
</html>
UserControl1.ascx:
<%@ Control Language="C#" %>

<script runat="server">
    protected void HelloFromServer(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("Server", "Hello from server - UserControl №1").Show();
    }        
</script>
<style>
    .uc1 {
        background-color: lightgray;
    }
</style>

<div class="uc1">
    <h1>User control 1</h1>
    <ext:Label ID="Label1" runat="server" Text="I am User control №1" />
    <br />
    <ext:Button ID="Button1" runat="server" Text="User control №1: Ext.Net button" OnDirectClick="HelloFromServer" />
</div>
Expected behavior:
User control should be positioned at top-left corner of tab.

Thanks in advance!