PDA

View Full Version : Combobox render problem


dbassett74
25 Jun 2009, 3:57 PM
There seems to be a rendering issue in Internet Explorer 6. The strange thing is that the 3.0 samples page does not exhibit this behavior even though it is supposedly using RC2.

I have eliminated any possiblity of my code being a problem by starting a new project and only having minimal code:



Ext.BLANK_IMAGE_URL = './Ext/resources/images/default/s.gif';
Ext.ns('Application');

function createCombo() {
var cbo = new Ext.form.ComboBox({
renderTo: 'divCombo'
});
};

// application main entry point
Ext.onReady(function() {
Ext.QuickTips.init();
createCombo();
});
You can see by the attached image that it is message up. This really concerns me. Is this a known issue? I am definitely referencing RC2. combo1.gif shows in IE. combo2.gif shows in FireFox. Seems like in IE, the bottom border is missing and the button is shifted up a little. Can someone please help me??
dbassett74
25 Jun 2009, 8:48 PM
Anyone? This is really a problem for me as we use IE in our production environment. Are there any known rendering issues with RC2?
tryanDLS
26 Jun 2009, 7:16 AM
I don't see any difference in how this renders in FF/IE6 with either RC2 or current SVN. Are you sure you updated all the files, including CSS from RC2?
dbassett74
26 Jun 2009, 7:20 AM
Something is definitely wrong. I will try and zip up a sample application including the ext files I'm using to see if you see the same problem.
dbassett74
26 Jun 2009, 7:46 AM
I have attached a sample web site that for me, duplicates the issue described. In FireFox, it looks fine. In IE6, the combobox is screwed up. As you can see, I am definitely referencing RC2. So, maybe I'm doing something else wrong?

I had to split up the zip file because it was too big.

Can you please tell me what I'm doing wrong?
tryanDLS
26 Jun 2009, 8:01 AM
Try it without the theme file also without pulling in the ext-base.js file in 2 places.
dbassett74
26 Jun 2009, 8:50 AM
I have done what you suggested and updated the origional attachments. Still the same problem. Are you not see the same problem I am? This is very strange.
tryanDLS
26 Jun 2009, 9:09 AM
Have you verified that the path to s.gif is correctly retrieving the image?

This is exactly what I used to test with


<html>
<head>
<link rel="stylesheet" type="text/css" href="/ext3/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext3/ext-all-debug.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '/ext3/resources/images/default/s.gif';

Ext.onReady(function() {
Ext.QuickTips.init();

var cbo = new Ext.form.ComboBox({
renderTo: 'divCombo'
});
});

</script>
</head>
<body>
<div id="divCombo"></div>
</body>
</html>
dbassett74
26 Jun 2009, 9:21 AM
Using your exact code, I am still seeing the rendering problem.
dbassett74
27 Jul 2009, 12:40 PM
Okay, I found something interesting about this. I found that if I add the following style declaration on the page that the combobox is rendered on, the problem goes away:



body {
font-family:helvetica,tahoma,verdana,sans-serif;
}


When I remove the above, the combobox again exhibits the rendering problem. My question is, is this style declaration necessary? Maybe I missed this in the docs?
danh2000
27 Jul 2009, 1:23 PM
Are you using a real IE6 or one of the IeTester type hacked installs?
ahocevar
12 Aug 2009, 6:26 AM
I can confirm the issue (not only on IE6, but also IE7), and that the posted css declaration for body fixes it. Strange...

BTW, this happens with Windows installations that have *only* IE6 or IE7 installed, no cross-browser testing hacks.
ShatyUT
11 Mar 2010, 7:25 AM
I too am seeing this issue and I see it with the ComboBox Samples (http://www.extjs.com/deploy/dev/examples/form/combos.html). Specifically, I'm in IE8 and when I hit the "Compatibility View" button to simulate IE7 but I have seen it in an IE 7 installation as well. I am just now reading about this CSS "fix" but am wondering whether that change will trickle down to other pieces of the page which will require more CSS to counter this change.