Hi Daniil,
Let's expand your example to fit my scenario.
ExtXREnderSample.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
[DirectMethod]
public void LoadChart(string panelId, string chartId)
{
Ext.Net.Panel p = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.Panel>(this.Form, panelId);
X.Js.Call("destroyFromCache", new JRawValue(p.ClientID));
DevTest.ExtXRenderControl uc = this.LoadControl("ExtXRenderControl.ascx") as DevTest.ExtXRenderControl;
uc.PanelID = panelId;
p.ContentControls.Add(uc);
X.Js.Call("putToCache", new JRawValue(p.ClientID), uc.ControlsToDestroy);
p.UpdateContent();
}
protected void Page_Load(object sender, EventArgs e)
{
}
</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 destroyFromCache = function (container) {
container.controlsCache = container.controlsCache || [];
Ext.each(container.controlsCache, function (controlId) {
var control = Ext.getCmp(controlId);
if (control && control.destroy) {
control.destroy();
}
});
};
var putToCache = function (container, controls) {
container.controlsCache = controls;
};
var load = function (panel) {
panel.body.mask('Loading...', 'x-mask-loading');
Ext.net.DirectMethods.LoadChart(panel.id, panel.chartId);
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Viewport ID="ViewPortMain" runat="server" Layout="border">
<Items>
<ext:Panel ID="mainPanel" runat="server" Border="false" Region="Center" BodyStyle="background-color : #e4edfe;">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West MinWidth="175" MaxWidth="400" Split="true" Collapsible="true">
<ext:Panel ID="Panel3" Width="175" runat="server" Title="Menu">
</ext:Panel>
</West>
<Center>
<ext:Container ID="Container1" runat="server" Region="Center" Layout="VBoxLayout">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container ID="Container2" runat="server" Layout="HBoxLayout" Flex="1">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel1" runat="server" Flex="1">
<CustomConfig>
<ext:ConfigItem Name="chartId" Value="1" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="load(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="load(this);" />
</Listeners>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Flex="1">
<CustomConfig>
<ext:ConfigItem Name="chartId" Value="2" Mode="Raw" />
</CustomConfig>
<Tools>
<ext:Tool Type="Refresh" Handler="load(panel);" />
</Tools>
<Listeners>
<AfterRender Handler="load(this);" />
</Listeners>
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Center>
</ext:BorderLayout>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
ExtXRenderControl.ascx
<%@ Control Language="C#" Inherits="DevTest.ExtXRenderControl" CodeBehind="ExtXRenderControl.ascx.cs" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic"%>
<ext:Label runat="server" ID="txtMyPanelID" />
ExtXRenderControl.ascx
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 DevTest
{
public partial class ExtXRenderControl : System.Web.UI.UserControl
{
public string PanelID { get; set; }
public virtual List<string> ControlsToDestroy
{
get
{
return new List<string>
{
txtMyPanelID.ClientID
};
}
}
protected void Page_PreRender(object sender, EventArgs e)
{
X.Js.AddScript(string.Format("{0}.body.unmask();", this.PanelID));
}
protected void Page_Load(object sender, EventArgs e)
{
this.txtMyPanelID.Text = PanelID;
System.Threading.Thread.Sleep(3000);
}
}
}
There are 3 issues I have with this at the moment.
Firstly when the page loads, the panels should simply display their PanelID in the ext:Label, these labels seem to get mixed up and panel1 displays panel1panel2 and panel2 displays nothing! I don't understand how this happens.... when you refresh a panel it seems to be random as to which ext:Label gets updated with what!!
Secondly the 'Loading' mask is not centered on the panels any more on initial page load (it seems to work for a refresh).
Thirdly, how could I initiate a panel load from server side, i.e. from inside a directmethod? (because load is now client side?).
I must initiate a panel load server side because the code to determine which panel needs to re-load and with what parameters is not stuff I want to write in javascript.
Many thanks for your help so far...
