Results 1 to 10 of 10

Thread: Drop Down Menu Not Rendering in IE 6

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default Drop Down Menu Not Rendering in IE 6

    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:
    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.
    Last edited by [email protected]; 8 Feb 2010 at 12:05 PM. Reason: Use code tags in the future please

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Please use code tags in the future.

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Do you get an exception when running that code? What debugging steps did you take?

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default

    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.

  5. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    do the Ext JS examples work for you in ie6?

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default

    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.

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default

    They work on the Ext JS 3.1 Samples site, so I guess I will need to figure out what the deltas are.

  8. #8
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default

    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. #9
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    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

  10. #10
    Ext JS Premium Member
    Join Date
    Jan 2010
    Posts
    18

    Default

    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 ;-)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •