[CLOSED] Best way to change background color when a window comes up

  1. #1

    [CLOSED] Best way to change background color when a window comes up

    Having this example bellow, how is the easiest way to change the page background to become entirely white instead of this default gray? I would like this behavior applied only in this particulary logon window, preserving the default behavior in other windows of this page.

    <%@ Page Language="C#" %>
    
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    
    <script runat="server">
        protected void btnLogin_Click(object sender, DirectEventArgs e)
        {
            this.Window1.Hide();
    
            string template = "<br /><b>LOGIN SUCCESS</b><br /><br />Username: {0}<br />Password: {1}";
            string username = this.txtUsername.Text;
            string password = this.txtPassword.Text;
            this.lblMessage.Html = string.Format(template, username, password);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Simple Login Form with Ajax Submit - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                
            <h1>Simple Login Form with Ajax Submit</h1>
            
            <ext:Button 
                ID="Button1" 
                runat="server" 
                Text="Logout" 
                Icon="LockOpen">
                <Listeners>
                    <Click Handler="#{Window1}.show();" />
                </Listeners>    
            </ext:Button>
            
            <ext:Label ID="lblMessage" runat="server" />
            
            <ext:Window 
                ID="Window1" 
                runat="server" 
                Closable="false"
                Resizable="false"
                Height="150" 
                Icon="Lock" 
                Title="Login"
                Draggable="false"
                Width="350"
                Modal="true"
                BodyPadding="5"
                Layout="FormLayout">
                <Items>
                    <ext:TextField 
                        ID="txtUsername" 
                        runat="server"                     
                        FieldLabel="Username" 
                        AllowBlank="false"
                        BlankText="Your username is required."
                        Text="Demo" />
                    <ext:TextField 
                        ID="txtPassword" 
                        runat="server" 
                        InputType="Password" 
                        FieldLabel="Password" 
                        AllowBlank="false" 
                        BlankText="Your password is required."
                        Text="Demo" />
                </Items>
                <Buttons>
                    <ext:Button ID="btnLogin" runat="server" Text="Login" Icon="Accept">
                        <Listeners>
                            <Click Handler="
                                if (!#{txtUsername}.validate() || !#{txtPassword}.validate()) {
                                    Ext.Msg.alert('Error','The Username and Password fields are both required');
                                    // return false to prevent the btnLogin_Click Ajax Click event from firing.
                                    return false; 
                                }" />
                        </Listeners>
                        <DirectEvents>
                            <Click OnEvent="btnLogin_Click">
                                <EventMask ShowMask="true" Msg="Verifying..." MinDelay="500" />
                            </Click>
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="btnCancel" runat="server" Text="Cancel" Icon="Decline">
                        <Listeners>
                            <Click Handler="#{Window1}.hide();#{lblMessage}.setText('LOGIN CANCELED')" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:Window>
        </form>
    </body>
    </html>
    Thanks!
    Last edited by Daniil; Jan 21, 2014 at 11:47 AM. Reason: [CLOSED]
  2. #2
    Hi @posser,

    What about Modal="false" for the Window and disable the Button (if needed)?
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @posser,

    What about Modal="false" for the Window and disable the Button (if needed)?
    Danill

    Actually when I said entirely white I mean really white, not modal set to false. I intend to use this windows like a login component that does not show page content to anonymous users.

    Thank you.
  4. #4
    Well, it will be still rendered to the browser. I mean the page's content. Even if it is hidden under an opaque mask. An anonymous user will be able to look at it in the Page Sources.

    So, if you are looking for a secure option, you need an individual Login page, then redirect to the actual page after successful logging in.

    Though, if you are OK with that, I think you should be able to make the mask opaque by CSS settings.
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, it will be still rendered to the browser. I mean the page's content. Even if it is hidden under an opaque mask. An anonymous user will be able to look at it in the Page Sources.

    So, if you are looking for a secure option, you need an individual Login page, then redirect to the actual page after successful logging in.

    Though, if you are OK with that, I think you should be able to make the mask opaque by CSS settings.
    All right Dannil, I realized that an individual login page will be my approach. Thanks for help.

Similar Threads

  1. [CLOSED] Change background color of button
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 17, 2013, 2:17 PM
  2. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  3. Replies: 2
    Last Post: Dec 29, 2011, 2:11 AM
  4. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Tags for this Thread

Posting Permissions