Hi again,
After further discussion with our architect I'm being asked to re-look at using the Ext.Net method, avoiding IFrames and use of NCache to replace session (so that I can turn session to readonly for the charting pages and gain Async loading).
Consequently I need some help in making the following prototype work, this is my current prototype with DirectMethod button handlers and control creation in OnInit.
It has the following problems:
1) Whenever I click on a button inside a control which fires a directmethod I get... "The control with ID 'xxxx' not found'... even though I AM re-creating and re-adding all the controls in OnInit of the page (but only when ViewState determined that they have been loaded once).
DashboardXRenderPrototype.aspx
<%@ Page Language="C#" EnableSessionState="ReadOnly"
AutoEventWireup="true" CodeBehind="DashboardXRenderPrototype.aspx.cs" Inherits="DevTesting.DashboardXRenderPrototype" %>
<%@ 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">
<ext:ResourceManager ID="extResourceManager" runat="server" DirectMethodNamespace="CompanyX" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var loadContainer = function (panel) {
panel.body.mask('Loading...', 'x-mask-loading');
CompanyX.LoadContainer(panel.id, panel.containerID, panel.loadTimeSecs, { viewStateMode: 'enabled' });
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:Viewport ID="ViewPortMain" runat="server" Layout="border">
<Items>
<ext:Panel ID="headerPanel" runat="server" Region="North" Title="Header" Height="76">
<Content>
<ext:Button runat="server" ID="btnReloadAllCharts" Text="Reload All Charts">
<DirectEvents>
<Click OnEvent="ReloadAllCharts" />
</DirectEvents>
</ext:Button>
</Content>
</ext:Panel>
<ext:Panel ID="mainPanel" runat="server" Border="false" Region="Center" BodyStyle="background-color : #e4edfe;">
<Content>
<ext:BorderLayout runat="server">
<West MinWidth="175" MaxWidth="400" Split="true" Collapsible="true">
<ext:Panel Width="175" runat="server" Layout="FitLayout">
<Items>
<ext:Panel ID="Container0" runat="server" Title="XRenderPanel">
<CustomConfig>
<ext:ConfigItem Name="containerID" Value="0" Mode="Raw" />
<ext:ConfigItem Name="loadTimeSecs" Value="0" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="loadContainer(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="loadContainer(this);" Delay="1"/>
</Listeners>
</ext:Panel>
</Items>
</ext:Panel>
</West>
<Center>
<ext:Container runat="server" Region="Center" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Layout="HBoxLayout" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Container1" runat="server" Flex="1" Title="XRenderPanel">
<CustomConfig>
<ext:ConfigItem Name="containerID" Value="1" Mode="Raw" />
<ext:ConfigItem Name="loadTimeSecs" Value="0" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="loadContainer(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="loadContainer(this);" Delay="1" />
</Listeners>
</ext:Panel>
<ext:Panel ID="Container2" runat="server" Flex="1" Title="XRenderPanel">
<CustomConfig>
<ext:ConfigItem Name="containerID" Value="2" Mode="Raw" />
<ext:ConfigItem Name="loadTimeSecs" Value="0" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="loadContainer(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="loadContainer(this);" Delay="1" />
</Listeners>
</ext:Panel>
</Items>
</ext:Container>
<ext:Container runat="server" Layout="HBoxLayout" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Container3" runat="server" Flex="1" Title="XRenderPanel">
<CustomConfig>
<ext:ConfigItem Name="containerID" Value="3" Mode="Raw" />
<ext:ConfigItem Name="loadTimeSecs" Value="5" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="loadContainer(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="loadContainer(this);" Delay="1" />
</Listeners>
</ext:Panel>
<ext:Panel ID="Container4" runat="server" Flex="1" Title="XRenderPanel">
<CustomConfig>
<ext:ConfigItem Name="containerID" Value="4" Mode="Raw" />
<ext:ConfigItem Name="loadTimeSecs" Value="5" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="loadContainer(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="loadContainer(this);" Delay="1" />
</Listeners>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Center>
</ext:BorderLayout>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
DashboardXRenderPrototype.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Net;
namespace DevTesting
{
public partial class DashboardXRenderPrototype : System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
//Dynamic controls must be re-created during each request otherwise ext cannot find the direct
//method handler, if this is not done then when you fire a direct method from say..
//a button in the user control you'll get the error 'The user control with ID='xxxxx' not found'
if (this.ViewState[string.Format("{0}HasLoaded", "Container0")] != null)
this.CreateControl("Container0", "0");
if (this.ViewState[string.Format("{0}HasLoaded", "Container1")] != null)
this.CreateControl("Container1", "1");
if (this.ViewState[string.Format("{0}HasLoaded", "Container2")] != null)
this.CreateControl("Container2", "2");
if (this.ViewState[string.Format("{0}HasLoaded", "Container3")] != null)
this.CreateControl("Container3", "3");
if (this.ViewState[string.Format("{0}HasLoaded", "Container4")] != null)
this.CreateControl("Container4", "4");
base.OnInit(e);
}
protected void Page_Load(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine(
string.Format(">Dashboard.Page_Load() = IsPostBack={0},IsAjaxRequest={1}", IsPostBack, X.IsAjaxRequest));
}
[DirectMethod(ViewStateMode = ViewStateMode.Enabled)]
public void LoadContainer(string panelID, string containerID, string loadTimeSecs)
{
System.Diagnostics.Debug.WriteLine(
string.Format(">Dashboard.LoadContainer() = panelID={0},containerID={1}", panelID, containerID));
DashboardXRenderPrototypeControl uc = this.LoadControl("DashboardXRenderPrototypeControl.ascx") as DashboardXRenderPrototypeControl;
uc.ID = string.Format("{0}{1}", panelID, containerID);
uc.PanelID = panelID;
uc.ContainerID = Int32.Parse(containerID);
uc.LoadTimeSecs = Int32.Parse(loadTimeSecs);
Ext.Net.Panel p = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.Panel>(this.Form, panelID);
if (p.ContentControls.Count > 0)
p.ContentControls.Clear();
p.ContentControls.Add(uc);
p.UpdateContent();
string key = string.Format("{0}HasLoaded", panelID);
this.ViewState[key] = true;
System.Diagnostics.Debug.WriteLine(string.Format("ViewState[{0}]={1}", key, this.ViewState[key]));
}
public void CreateControl(string panelID, string containerID)
{
System.Diagnostics.Debug.WriteLine(
string.Format(">Dashboard.CreateControl() = panelID={0},containerID={1}", panelID, containerID));
DashboardXRenderPrototypeControl uc = this.LoadControl("DashboardXRenderPrototypeControl.ascx") as DashboardXRenderPrototypeControl;
uc.ID = string.Format("{0}{1}", panelID, containerID);
uc.PanelID = panelID;
uc.ContainerID = Int32.Parse(containerID);
Ext.Net.Panel p = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.Panel>(this.Form, panelID);
p.ContentControls.Add(uc);
}
protected void ReloadAllCharts(object sender, DirectEventArgs e)
{
X.Js.Call("loadContainer", new JRawValue("Container0"));
X.Js.Call("loadContainer", new JRawValue("Container1"));
X.Js.Call("loadContainer", new JRawValue("Container2"));
X.Js.Call("loadContainer", new JRawValue("Container3"));
X.Js.Call("loadContainer", new JRawValue("Container4"));
}
[DirectMethod]
public void RefreshContainer(string containerID)
{
System.Diagnostics.Debug.WriteLine(
string.Format(">Dashboard.RefreshContainer(),containerID={0}", containerID));
int id = Int32.Parse(containerID);
switch (id)
{
case 0:
X.Js.Call("loadContainer", new JRawValue("Container0"));
break;
case 1:
X.Js.Call("loadContainer", new JRawValue("Container1"));
break;
case 2:
X.Js.Call("loadContainer", new JRawValue("Container2"));
break;
case 3:
X.Js.Call("loadContainer", new JRawValue("Container3"));
break;
case 4:
X.Js.Call("loadContainer", new JRawValue("Container4"));
break;
case 5:
this.ReloadAllCharts(null, new Ext.Net.DirectEventArgs(null));
break;
}
}
}
}
DashboardXRenderPrototypeControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DashboardXRenderPrototypeControl.ascx.cs" Inherits="DevTesting.DashboardXRenderPrototypeControl" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Label runat="server" ID="TimeoutText">
</ext:Label>
<ext:Label runat="server" ID="LoadText">
</ext:Label>
<ext:TextField ID="txtReloadID" runat="server" Text="1">
</ext:TextField>
<ext:Button ID="btnReload" runat="server" Text="Reload (Enter 0-5)">
<Listeners>
<Click Handler="parent.CompanyX.RefreshContainer(#{txtReloadID}.getValue());" />
</Listeners>
</ext:Button>
<ext:Label runat="server" ID="ReloadBtnClickText">
</ext:Label>
<ext:Button runat="server" Text="Test Direct Method" ID="ControlButtonDirectEvent">
<Listeners>
<Click Handler="#{DirectMethods}.ControlDirectMethod();" />
</Listeners>
</ext:Button>
DashboardXRenderProrotypeControl.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
namespace DevTesting
{
public partial class DashboardXRenderPrototypeControl : System.Web.UI.UserControl
{
public string PanelID { get; set; }
public int ContainerID { get; set; }
public int LoadTimeSecs{ get; set; }
protected void Page_Load(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(TimeSpan.FromSeconds(LoadTimeSecs));
string s = string.Format("{1} Container={2} Page_Load> @ {0}", DateTime.Now.ToString("hh:mm:ss.fff"), this.ID, this.ContainerID);
System.Diagnostics.Trace.WriteLine(s);
this.LoadText.Text = string.Format(s);
this.TimeoutText.Text = string.Format("LoadTimeSecs={0}", this.LoadTimeSecs);
}
protected void Page_PreRender(object sender, EventArgs e)
{
X.Js.AddScript(string.Format("{0}.body.unmask();", this.PanelID));
}
[DirectMethod]
public void ControlDirectMethod()
{
string s = string.Format(">ControlDirectMethod @ {0}, ID={1}", DateTime.Now.ToString("hh:mm:ss.fff"), this.txtReloadID.Value);
System.Diagnostics.Trace.WriteLine(s);
this.ReloadBtnClickText.Text = s;
}
}
}
Originally Posted by sadaf
