I will look at your suggestion in the morning. here is the example that i currently have.
The Ext:window is defined in the UserControl, but I would like to mask the entire viewport.
I fill fix the contextMenu to only be active over treePanel menus.
ManualMask01.aspx
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Manual Mask</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="Server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="West" Width="200" Title="West" Collapsible="true"
Layout="AccordionLayout">
<Items>
<ext:UserControlLoader runat="server" Path="ManualMask02.ascx" />
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center" Title="Center">
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>
ManualMask02.ascx
<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (X.IsAjaxRequest)
return;
BuildOverviewReportsTree();
}
private void BuildOverviewReportsTree()
{
Ext.Net.Node rootNode = new Ext.Net.Node();
rootNode.NodeID = "root";
rootNode.Expanded = true;
ReportsTreePanel.Root.Clear();
ReportsTreePanel.Root.Add(rootNode);
Ext.Net.Node reportNode;
reportNode = new Ext.Net.Node();
reportNode.Text = "AAP Request Counts by Org";
reportNode.Icon = Icon.Report;
reportNode.CustomAttributes.Add(new ConfigItem("reportAbbr", "CountByOrg", ParameterMode.Value));
reportNode.Expanded = false;
reportNode.Leaf = true;
rootNode.Children.Add(reportNode);
reportNode = new Ext.Net.Node();
reportNode.Text = "Reportable Data Requests";
reportNode.Icon = Icon.Report;
reportNode.CustomAttributes.Add(new ConfigItem("reportAbbr", "Summary", ParameterMode.Value));
reportNode.Expanded = false;
reportNode.Leaf = true;
rootNode.Children.Add(reportNode);
}
</script>
<ext:FormPanel ID="ReportsPanel" runat="server" Layout="VBoxLayout" Title="Reports"
Icon="ReportGo">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<HtmlBin>
<script type="text/javascript">
var defineReportOptions = function () {
var node = App.ReportsTreePanel.getSelectionModel().getLastSelected();
App.ReportAbbr.setValue(node.raw['reportAbbr']);
App.ReportName.setText(node.raw['text']);
App.ReportParameters.show();
}
</script>
</HtmlBin>
<Bin>
<ext:Menu ID="ReportsCM" runat="server">
<Items>
<ext:MenuItem runat="server" Icon="ReportEdit" Text="Define Options">
<Listeners>
<Click Fn="defineReportOptions">
</Click>
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
</Bin>
<Items>
<ext:TreePanel ID="ReportsTreePanel" runat="server" ClientIDMode="Static" BodyPadding="5"
RootVisible="false" Flex="1" ContextMenuID="ReportsCM">
<%-- Since I am defining Root Visible I need to always have a root node. Defined --%>
<%-- root node here, incase I don't populate the TreePanel during Page_Load. --%>
<%-- This could occur if the user is not logged in. --%>
<Root>
<ext:Node Text="Root" Leaf="true" />
</Root>
<SelectionModel>
<ext:TreeSelectionModel runat="server" />
</SelectionModel>
</ext:TreePanel>
</Items>
</ext:FormPanel>
<ext:Window ID="ReportParameters" runat="server" ClientIDMode="Static" Title="Report Parameters"
Hidden="true" Width="260" Layout="FitLayout" Resizable="false" Border="False"
Modal="true" Icon="TableEdit">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" BodyPadding="10" BodyStyle="background:transparent; padding:5px 10px 10px;"
Cls="reopenPanel">
<FieldDefaults LabelAlign="Right" LabelWidth="70" />
<Items>
<ext:Container ID="Container1" runat="server" StyleSpec="text-align: center;">
<Items>
<ext:Hidden ID="ReportAbbr" runat="server" ClientIDMode="Static" />
<ext:Label ID="ReportName" runat="server" ClientIDMode="Static" StyleSpec="color: Purple; font-weight: bold;" />
</Items>
</ext:Container>
</Items>
</ext:FormPanel>
</Items>
<Buttons>
<ext:Button runat="server" Text="Cancel" Icon="Cancel" Handler="App.ReportParameters.hide();" />
</Buttons>
<Listeners>
<Show Handler="this.center();" />
</Listeners>
</ext:Window>