[CLOSED] Show User Control during Page_Load

  1. #1

    [CLOSED] Show User Control during Page_Load

    This is an odd question. I have a user control that I will potentially show/hide many times during the life of the page. So I add it to the page via ext:UserControlLoader and initially hide it. In one case I might want it shown right away when the page is loaded.

    • Run the code and press the "Show UC Dialog" button. Everything looks fine.
    • Uncomment the two lines in Page_Load and run the code and press the "Show UC Dialog" button. The dialog is shown initially, but the layout is ugly.


    What am I overlooking?

    ASPX File:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
           //Window d = X.GetCmp<Window>("UcDialog");
           //d.Show();
        }
    
    </script>
    <head runat="server">
        <title />
        <style type="text/css">
            /* Packs the indicatorIcon to the upper/right of a text field. */
            .DialogForm .x-panel-body-default {
                background: transparent;
                padding: 5px 10px 0px;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Window
            runat="server"
            Title="Question"
            Width="250"
            Height="400"
            Maximizable="true"
            BodyBorder="0"
            Icon="ApplicationTileVertical"
            Layout="BorderLayout">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Show UC Dialog"
                            OnClientClick="#{UcDialog}.show();" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
            </Items>
        </ext:Window>
    </body>
    </html>
    ASCX File:
    <%@ Control Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Window ID="UcDialog" runat="server" ClientIDMode="static" Title="UC" Icon="UserGreen"
        Width="400" Layout="FitLayout" Resizable="false" Modal="true" Border="False"
        Constrain="true" Closable="false" Hidden="true" ActiveIndex="0">
        <HtmlBin>
            <script type="text/javascript">
                function closeDialog() {
                    App.UcDialog.close();
                }
            </script>
        </HtmlBin>
        <Items>
            <ext:FormPanel ID="UcForm" runat="server" ClientIDMode="Static"
                DefaultAnchor="100%" DefaultButton="UcSubmitBtn" Cls="DialogForm">
                <Items>
                    <ext:Label runat="server" Text="Please enter the following info." />
                    <ext:Container runat="server" Html="<hr/>" MarginSpec="0 0 5 0" />
                    <ext:TextField ID="UcField" runat="server" ClientIDMode="Static" AllowBlank="false"
                        FieldLabel="UC Field" TabIndex="1" />
                </Items>
                <Listeners>
                    <ValidityChange Handler="App.UcSubmitBtn.setDisabled(!valid);" />
                </Listeners>
            </ext:FormPanel>
        </Items>
        <Buttons>
            <ext:Button ID="UcSubmitBtn" runat="server" ClientIDMode="Static" Text="Submit" Icon="UserGo"
                Disabled="true" OnClientClick="closeDialog" />
            <ext:Button ID="UcCancelBtn" runat="server" ClientIDMode="Static" Text="Cancel"
                Icon="BulletCross" OnClientClick="closeDialog" />
        </Buttons>
        <Listeners>
            <Show Handler="App.UcForm.reset(); App.UcField.focus(); App.UcDialog.doLayout();" />
        </Listeners>
    </ext:Window>
    Last edited by Daniil; Oct 16, 2014 at 3:34 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I guess with your approach the Window is shown too early in the component's rendering/layouting life cycle.

    This appears to be working.
    <Listeners>
        <AfterLayout Handler="App.UcDialog.show();" Buffer="50" Single="true" />
    </Listeners>
    This alternative approach is even better.
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            (uclDialog.UserControls[0].FindControl("UcDialog") as Window).Hidden = false;
        }
    }
    By the way, do you really need to put a Window into <Items>?
  3. #3
    Ok, I like

    (uclDialog.UserControls[0].FindControl("UcDialog") as Window).Hidden = false;
    Referencing your question:

    By the way, do you really need to put a Window into <Items>?
    I guess it should be put in
            <Content>
                <ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
            </Content>
    One difference between putting it in <Content> vs <Items> is that the default focus is not in the text field when the dialog is shown when defined in <Content>. Thoughts?
    Last edited by cwolcott; Oct 16, 2014 at 1:11 PM.
  4. #4
    OK I added DefaultFoucs="UcField" to the ext:Window control and that took care of the final issue.

    Please close the thread.
  5. #5
    I guess it should be put in
            <Content>
                <ext:UserControlLoader runat="server" ID="uclDialog" UserControlID="ucciDialog" Path="./UcDialog.ascx" />
            </Content>
    Not quite:)

    A UserControlLoader is supposed to be put into <Items>. I just wanted to suggest to put it into <Bin>, maybe.

    Ideally, I would avoid putting floating items like a Window into <Items>. I would put it into <Bin>.

    For example, are you OK that the modal mask appears inside the parent Window only?
  6. #6
    If I put it into <Bin> the window is not displayed during the Page_Load. If it is in <Items> or <Content> it is?
  7. #7
    If I put it into <Bin> the window is not displayed during the Page_Load.
    Yes, if something is inside <Bin>, it's a developer's obligation to show/render it when needed.

    If it is in <Items> or <Content> it is?
    Yes, it is.
  8. #8
    Thanks. I hate forgetting thinks like that.

    Please close the thread.

Similar Threads

  1. Replies: 2
    Last Post: May 09, 2013, 3:41 PM
  2. Replies: 2
    Last Post: Feb 06, 2012, 9:06 AM
  3. how to upload user control dynamicaly on user control
    By archana mahadule in forum 1.x Help
    Replies: 1
    Last Post: Jan 13, 2011, 12:05 PM
  4. Show Modal window from a User Control
    By yourspraba in forum 1.x Help
    Replies: 1
    Last Post: Jun 29, 2010, 5:43 PM
  5. Show data gridpanel without Page_load
    By flaviodamaia in forum 1.x Help
    Replies: 1
    Last Post: Feb 27, 2009, 10:53 AM

Posting Permissions