Please refer to the code snippet below. Click on the button to load the panel initially. It will fire a postback on either Expand or Collapse client event thereafter.
Main.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void LoadPreview(string url)
{
this.PanelPreview.ClearContent();
this.PanelPreview.RemoveAll(true);
this.PanelPreview.AutoLoad.Url = url;
this.PanelPreview.AutoLoad.Mode = LoadMode.IFrame;
this.PanelPreview.AutoLoad.NoCache = true;
this.PanelPreview.AutoLoad.ShowMask = true;
this.PanelPreview.AutoLoad.MaskMsg = "Loading Preview...";
this.PanelPreview.LoadContent();
}
</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>Ext.NET Example</title>
<script type="text/javascript">
var onClick = function () {
PanelPreview.clearContent();
var url = "Preview.aspx";
X.LoadPreview(url, {
eventMask: { showMask: false },
success: function () {
PanelPreview.expand(false);
}
});
};
var onCollapse = function () {
};
var onExpand = function () {
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" DirectMethodNamespace="X" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center">
<Items>
<ext:Button runat="server" Text="Load & Preview">
<Listeners>
<Click Fn="onClick" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="PanelPreview" runat="server" Region="East" HideMode="Offsets" Collapsed="true" CollapseMode="Mini" Width="800"
Collapsible="true" Title="Preview (Read-only)">
<Listeners>
<Collapse Fn="onCollapse" />
<Expand Fn="onExpand" />
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Preview.aspx
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Response.Write(DateTime.Now.ToString("HH:mm:ss tt"));
}
</script>