PDA

View Full Version : [CLOSED] Modal Window assign parent



cwolcott
Mar 25, 2013, 4:23 PM
I have a Window that I defined as Modal. The window is currently shown via a click listener on a contextMenu button over a treePanel in my Viewport's West panel. When the Window is shown I would like the entire Viewport to be greyed out just not the West Panel.

How can I define that.

Daniil
Mar 25, 2013, 4:36 PM
Hi Chris,

I don't think a modal mask is configurable.

I would set try to set up Modal="false" for the Window and mask the area you need manually.

cwolcott
Mar 25, 2013, 11:24 PM
I am trying to work up a small sample. Do you have an example of setting up a mask manually?

Baidaly
Mar 25, 2013, 11:56 PM
Hello!

You can use mask and unmask methods:

http://docs.sencha.com/ext-js/4-2/#!/api/Ext.dom.Element-method-mask
http://docs.sencha.com/ext-js/4-2/#!/api/Ext.dom.Element-method-unmask


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" Theme="Gray" DisableViewState="true" />

<ext:Window runat="server" Html="Lorem ipsum" ID="Window1" Hidden="True">
<Listeners>
<Show Handler="Ext.getBody().mask();"></Show>
<Hide Handler="Ext.getBody().unmask();"></Hide>
</Listeners>
</ext:Window>

<ext:Button runat="server" Text="Mask all" OnClientClick="#{Window1}.show();"></ext:Button>
</body>
</html>

cwolcott
Mar 26, 2013, 12:10 AM
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.

5904

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().getLastSe lected();
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>

cwolcott
Mar 26, 2013, 12:17 AM
Go ahead and close the thread. Your solution will work just fine.

Do you consider the below steps a bug:

If the window is shown and is still set to Modal="true" the Accordian panel is masked. But I could still collapse it and the mask is still visible where the panel was.

I really don't care anymore because I didn't want to mask the the Accordian Panel, but the entire viewport (which you have solved).

Daniil
Mar 26, 2013, 4:36 AM
If the window is shown and is still set to Modal="true" the Accordian panel is masked. But I could still collapse it and the mask is still visible where the panel was.


It looks a bug. Please clarify is it reproducible with your example?

cwolcott
Mar 26, 2013, 8:13 AM
Yes it is.

Daniil
Mar 26, 2013, 8:43 AM
Reproduced.

Well, when the UserControlLoader does the job, it produces:


<ext:Panel runat="server">
<Items>
<ext:FormPanel ... />
<ext:Window ... />
</Items>
</ext:Panel>

So, the Window is within the Items. So, it becomes modal within the Panel's context only.

Generally, I would avoid putting a Window to Items at all. There is a Bin collection for that. So, moving the Window to the FormPanel's Bin collection makes the things ordinary.

cwolcott
Mar 26, 2013, 9:43 AM
Got it. Please close the thread.