PDA

View Full Version : Drop Down Menu Not Rendering in IE 6



skhealy
8 Feb 2010, 11:39 AM
Hello everyone,

I'm working a a state Web application that requires the use of IE 6 (I will interject no
comments or opinions on this requirement LOL). We are planning to use JSF 2.0 and ExtJs (the latter we will license) and are in the proof-of-concept stage of development. In any event, I created a drop-down menu for the application using ExtJs and it works fine in
Firefox and Safari, but not in IE 6. So I thought to use a simplified version of example code from the ExtJs site, just to be sure the way I coded the menu wasn't the problem. I got the same results. Here is the simplified code:


<h:panelGroup id="dropDownMenu" layout="block">
<h:outputScript>

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [
{
text: 'Radio Options',
menu: { // submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Gray Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Default Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}
]
}
}
]
});

var tb = new Ext.Toolbar();

tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', //
menu: menu // assign menu by instance
});

function onButtonClick(btn){
alert('You clicked a button.');
}

function onItemClick(item){
alert('You clicked an item.');
}

function onItemCheck(item, checked){
alert('You checked a menu item.');
}

function onItemToggle(item, pressed){
alert('You toggled a button.');
}

tb.render('dropDownMenuForm:dropDownMenu');

});

</h:outputScript>
</h:panelGroup>


The menu button shows up in IE, but when you click on it nothing happens (no drop down menu appears). What, if anything, am I missing?

Thanks in advance for your help.

8 Feb 2010, 12:05 PM
Please use code tags in the future.

8 Feb 2010, 12:07 PM
Do you get an exception when running that code? What debugging steps did you take?

skhealy
8 Feb 2010, 12:24 PM
I installed the Microsoft Script Debugger (MSE is not installed even though I have MS Office 2003), added an erroneous alert to ensure it was catching JS errors, then took it out. The Debugger doesn't cry when IE load the page containing the menu, so there are apparently no JS problems with the code.

8 Feb 2010, 12:31 PM
do the Ext JS examples work for you in ie6?

skhealy
8 Feb 2010, 12:37 PM
I'll have to test that independently (apart from the JEE application); I presumed they would. Let me try and see and get back to you.

skhealy
8 Feb 2010, 12:43 PM
They work on the Ext JS 3.1 Samples site, so I guess I will need to figure out what the deltas are.

skhealy
9 Feb 2010, 1:56 PM
Alright...ascertained that the problem with the example code working was our stylesheet setting the body element to 100% height. That broke things in IE 6. Now, using the code I wrote, we are having the same problem with IE 6 only on the index page, where we are also making using of the Ext JS portal extensions to place DnD quasi-portlet panels of information. If I remark out the portal script, my code works fine in that lamentably bad browser.

So, before taking time to troubleshoot this problem and proceeding further with Ext JS, let me just ask: what are we up against with having to support IE 6? Are you developers out there having to spend an inordinate amount of time troubleshooting code that works fine with Firefox and Safari but not IE 6? Has anyone used the portal stuff in conjunction with an Ext Toolbar and Menus?

Thanks in advance for your input ;-)

9 Feb 2010, 2:00 PM
Ext helps level the playingfield, but if you bork things up - your bad :P

Seroiusly, I spend time testing every browser. No testing = buggy code :(

skhealy
10 Feb 2010, 10:52 AM
Just to keep everyone up to date: I discovered the source of the problem with IE 6 and, again, it was a CSS issue. Following a code example, I set the columnWidth of the three Portal columns to 0.33. Suspecting it was some kind of CSS-related issue, I played around with the various Ext JS configured stylings until I found that setting the columnWidth to 0.330 made the problem go away.

So the moral with using IE 6 is this: if there are no discernible JS errors, look for some kind of CSS IE-specific anomaly. With that, consider this thread closed ;-)