[CLOSED] Modal Window assign parent

  1. #1

    [CLOSED] Modal Window assign parent

    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.
    Last edited by Daniil; Mar 26, 2013 at 11:39 AM. Reason: [CLOSED]
  2. #2
    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.
  3. #3
    I am trying to work up a small sample. Do you have an example of setting up a mask manually?
  4. #4
    Hello!

    You can use mask and unmask methods:

    http://docs.sencha.com/ext-js/4-2/#!...nt-method-mask
    http://docs.sencha.com/ext-js/4-2/#!...-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>
  5. #5
    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.

    Click image for larger version. 

Name:	Mask01.JPG 
Views:	51 
Size:	31.7 KB 
ID:	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().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>
    Last edited by cwolcott; Mar 26, 2013 at 12:14 AM.
  6. #6
    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).
  7. #7
    Quote Originally Posted by cwolcott View Post
    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?
  8. #8
    Yes it is.
  9. #9
    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.
  10. #10
    Got it. Please close the thread.

Similar Threads

  1. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  2. Replies: 0
    Last Post: Jan 07, 2011, 7:46 AM
  3. Lock the parent (Modal=true)
    By mário in forum 1.x Help
    Replies: 4
    Last Post: Jul 20, 2010, 6:55 PM
  4. Anchor modal window to parent frame
    By stone216 in forum 1.x Help
    Replies: 3
    Last Post: Jan 27, 2010, 2:40 PM
  5. Passing values from modal Window to parent
    By Rodriquez in forum 1.x Help
    Replies: 0
    Last Post: Oct 07, 2009, 10:21 AM

Posting Permissions