PDA

View Full Version : Extjs Gray theme css problem with message boxes



john.dunlap
24 Jan 2011, 11:46 AM
I've encountered what appears to be a bug in the gray theme css of Ext 3.3.1. I've attached a demonstration program and a potential fix. I've confirmed my results on both firefox and ie as well as in windows and linux. Visually, the problem is that the content area of the message box is a darker gray than the rest of the box. If you run the attached code you will see the problem and if you then uncomment the css block the problem will go away.



<html>
<head>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/xtheme-gray.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>

<!--
<style type="text/css">
body.x-body-masked .x-window-plain .x-window-mc {
background-color: #F4F4F4;
}
</style>
-->

<script type="text/javascript">
Ext.onReady(function() {
Ext.Msg.show({
title:'Are you sure?',
msg: 'You are about to permanently delete these records. Are you sure you want do this?',
buttons: Ext.Msg.YESNO,
modal: true,
fn: function(buttonId, text, cfg)
{
if (buttonId === 'yes')
{
alert('records deleted');
}

else
{
alert('records not deleted');
}
},
icon: Ext.MessageBox.QUESTION
});
});
</script>
</head>
<body></body>
</html>