PDA

View Full Version : [CLOSED] Best way to change background color when a window comes up



posser
Jan 20, 2014, 3:40 PM
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!

Daniil
Jan 21, 2014, 3:59 AM
Hi @posser,

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

posser
Jan 21, 2014, 10:30 AM
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.

Daniil
Jan 21, 2014, 11:31 AM
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.

posser
Jan 21, 2014, 11:44 AM
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.