Sep 20, 2013, 11:46 AM
Positioning dynamically loaded user control within TabPanel on ViewPort
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:
Please see source code.
Default.aspx:
User control should be positioned at top-left corner of tab.
Thanks in advance!
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:
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!