Aug 25, 2010, 7:40 PM
[1.0] Ensuring you can see the animated window in Gray theme
I was originally going to post a question asking how to solve this and worked it out while typing the post, so thought I'd at least share it :)
Basically in 1.0/ExtJS 3.3, the gray theme seems to be very light in some areas, including the window proxy (the thing that is shown when animating the close/hide of a window). In fact, I could not even see the window proxy in the gray theme at all and my monitor is pretty good!
I had a look at the ExtJS CSS for the gray theme and indeed the proxy's background is almost white!
Here's the original CSS:
Basically in 1.0/ExtJS 3.3, the gray theme seems to be very light in some areas, including the window proxy (the thing that is shown when animating the close/hide of a window). In fact, I could not even see the window proxy in the gray theme at all and my monitor is pretty good!
I had a look at the ExtJS CSS for the gray theme and indeed the proxy's background is almost white!
Here's the original CSS:
.x-window-proxy {
background-color:#fcfcfc;
border-color:#d0d0d0;
}.x-window-proxy {
background-color:#ccc;
border-color:#a0a0a0;
}<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Showing window with animation</title>
<style type="text/css">
body { font:9pt/1.68 verdana, sans-serif; padding:1em; }
p { padding-top:1em; }
.x-window-proxy {
/* original rules for gray theme
background-color:#fcfcfc;
border-color:#d0d0d0;
*/
background-color:#ccc;
border-color:#a0a0a0;
}
</style>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" DirectEventUrl="default.aspx" />
<form id="form1" runat="server">
<div>
<ext:Button ID="WindowLauncher" Text="Launch Window" runat="server">
<Listeners>
<Click Handler="#{Window}.show();" />
</Listeners>
</ext:Button>
<ext:Window ID="Window" Title="Test" runat="server" AnimateTarget="WindowLauncher" Hidden="true">
<Content>
<p>{Test}</p>
</Content>
</ext:Window>
<p><button id="Test2">Launch second window with Ext JS</button></p>
<script type="text/javascript">
Ext.onReady(function () {
Ext.get("Test2").on('click', function (e, btn) {
new Ext.Window({ title: "Test", modal: false, html: "Test", width: 300, height: 100 }).show(btn);
e.preventDefault();
});
});
</script>
</div>
</form>
</body>
</html>
