Default.aspx :
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
/// Dynamic load control logic
/// </summary>
/// <param name="e"></param>
protected override void OnInit(EventArgs e)
{
if (!X.IsAjaxRequest)
{
// First load: the default interface is Panel1.ascx
this.ShowPanel("Panel1.ascx", false);
}
else
{
// Get the call event information
string arg = this.Request.Params["__EVENTARGUMENT"];
if (arg == "Button1|event|Click")
{
// User click on Button1: system load Panel1.ascx,
// forcing the panel update method
this.ShowPanel("Panel1.ascx", true);
}
else if (arg == "Button2|event|Click")
{
// User click on Button2: system load Panel2.ascx,
// forcing the panel update method
this.ShowPanel("Panel2.ascx", true);
}
else
{
// All other events, system load current panel
// without forcing the panel update method
this.ShowPanel(this.CurrentControlName, false);
}
}
base.OnInit(e);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.fieldNotInUserControl.Text = "First Load";
}
else
{
this.fieldNotInUserControl.Text = this.Request.Params["__EVENTARGUMENT"];
}
}
/// <summary>
/// Dynamic load control method
/// </summary>
/// <param name="contrlName"></param>
private void ShowPanel(string contrlName, bool update)
{
// Loading usercontrol
BaseUserControl uc1 = (BaseUserControl)this.LoadControl(contrlName);
uc1.ID = "UC1";
this.Panel1.ContentControls.Add(uc1);
if (update)
{
// Attention: this check is for a viewstate bug
this.Panel1.UpdateContent();
}
// Set usercontrol path on session
this.CurrentControlName = contrlName;
}
/// <summary>
/// Set or Get the current loaded usercontrol on interface
/// </summary>
private string CurrentControlName
{
get
{
if (this.Session["CurrentControlName"] != null)
return this.Session["CurrentControlName"].ToString();
else
return string.Empty;
}
set
{
this.Session["CurrentControlName"] = value;
}
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Button1_Click(object sender, DirectEventArgs e)
{
// Attention: the ShowPanel method cannot be called on this handler
// this.ShowPanel("Panel1.ascx", true);
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Button2_Click(object sender, DirectEventArgs e)
{
// Attention: the ShowPanel method cannot be called on this handler
// this.ShowPanel("Panel2.ascx", true);
}
</script>
<!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="resManager" runat="server" AjaxViewStateMode="Enabled">
</ext:ResourceManager>
<ext:TextField ID="fieldNotInUserControl" runat="server"></ext:TextField>
<ext:Panel
ID="Panel1"
runat="server"
Width="900"
Height="600"
Padding="5"
>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" >
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Panel 1">
<DirectEvents>
<Click OnEvent="Button1_Click">
<EventMask Target="Page" ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button
ID="Button2"
runat="server"
Text="Panel 2" >
<DirectEvents>
<Click OnEvent="Button2_Click">
<EventMask Target="Page" ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</form>
</body>
</html>
Widget1.ascx :
<%@ Control Language="C#" Inherits="BaseUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
this.txtWidget1.Text = "Widget1.Page_Load";
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnWidget1_Click(object sender, Ext.Net.DirectEventArgs e)
{
this.txtWidget1.Text = "Widget1.btnWidget1_Click";
}
</script>
<ext:TextField ID="txtWidget1" runat="server" FieldLabel="Text Field" ViewStateMode="Enabled">
</ext:TextField>
<ext:Button ID="btnWidget1" runat="server" Text="Button" ViewStateMode="Enabled">
<DirectEvents>
<Click OnEvent="btnWidget1_Click">
</Click>
</DirectEvents>
</ext:Button>
Widget2.ascx :
<%@ Control Language="C#" Inherits="BaseUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
this.txtWidget2.Text = "Widget2.Page_Load";
}
/// <summary>
///
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnWidget2_Click(object sender, Ext.Net.DirectEventArgs e)
{
this.txtWidget2.Text = "Widget2.btnWidget2_Click";
}
</script>
<ext:TextField ID="txtWidget2" runat="server" FieldLabel="Text Field" ViewStateMode="Enabled">
</ext:TextField>
<ext:Button ID="btnWidget2" runat="server" Text="Button" ViewStateMode="Enabled">
<DirectEvents>
<Click OnEvent="btnWidget2_Click">
</Click>
</DirectEvents>
</ext:Button>
Panel1.ascx :
<%@ Control Language="C#" Inherits="BaseUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected override void OnInit(EventArgs e)
{
Ext.Net.ColumnLayoutConfig layoutConfig = new Ext.Net.ColumnLayoutConfig();
layoutConfig.ScrollOffset = 20;
layoutConfig.FitHeight = false;
this.myPortal.LayoutConfig.Add(layoutConfig);
Ext.Net.PortalColumn column = new Ext.Net.PortalColumn();
column.ID = "left";
column.StyleSpec = "padding:10px";
column.Layout = "AnchorLayout";
column.ColumnWidth = 0.50;
this.myPortal.Items.Add(column);
Portlet portlet = new Portlet();
portlet.ID = "myPortlet";
portlet.Title = "Widget 1";
column.Items.Add(portlet);
BaseUserControl uc1 = (BaseUserControl)this.LoadControl("Widget1.ascx");
uc1.ID = "ucWidget";
portlet.ContentControls.Add(uc1);
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<ext:Panel
ID="pnlUserControl"
runat="server"
Width="500"
Height="300"
Padding="5">
<Items>
<ext:Portal ID="myPortal" runat="server" Layout="ColumnLayout">
<Items>
</Items>
</ext:Portal>
</Items>
</ext:Panel>
Panel2.ascx :
<%@ Control Language="C#" Inherits="BaseUserControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected override void OnInit(EventArgs e)
{
Ext.Net.ColumnLayoutConfig layoutConfig = new Ext.Net.ColumnLayoutConfig();
layoutConfig.ScrollOffset = 20;
layoutConfig.FitHeight = false;
this.myPortal.LayoutConfig.Add(layoutConfig);
Ext.Net.PortalColumn column = new Ext.Net.PortalColumn();
column.ID = "left";
column.StyleSpec = "padding:10px";
column.Layout = "AnchorLayout";
column.ColumnWidth = 0.50;
this.myPortal.Items.Add(column);
Portlet portlet = new Portlet();
portlet.ID = "myPortlet";
portlet.Title = "Widget 2";
column.Items.Add(portlet);
BaseUserControl uc1 = (BaseUserControl)this.LoadControl("Widget2.ascx");
uc1.ID = "ucWidget";
portlet.ContentControls.Add(uc1);
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<ext:Panel
ID="pnlUserControl"
runat="server"
Width="500"
Height="300"
Padding="5">
<Items>
<ext:Portal ID="myPortal" runat="server" Layout="ColumnLayout">
<Items>
</Items>
</ext:Portal>
</Items>
</ext:Panel>
BaseUserControl.cs :
using System.Collections.Generic;
using System.Web.UI;
public class BaseUserControl : UserControl
{
public virtual List<string> ControlsToDestroy
{
get
{
// we should return none lazy controls only because lazy controls will be autodestroyed by parent container
return new List<string>();
}
}
}