Hi All,

I am working on a website in which I would like to implement sidebar navigation that appears on rollover. My layout is being done as a border layout right now (as this has a lot of useful features already implemented); however, if people can recommend a different layout for my purposes please feel free to do so. My trouble seems to be continuously stemming from nested layouts within this border layout. My objective is to dissect the following design:

http://picasaweb.google.com/lh/photo...eat=directlink

Into pieces so that I can make it more modular and dynamic as well as have it fit appropriately to any webpage. The current problem is that the graphic I am using for my navigation sidebar does not fit the full height of its panel when it initially renders. I have tried a variety of sizing options to varying levels of success, but thus far I have not resolved the problem. One difficulty is that there are two panels in the sidebar that dynamically hide and appear based on which content I would like to show at the moment and I believe this nesting is somehow corrupting the necessary styles to make the panel fit the full height of its container. It should be noted it is the panel itself, not the graphic, that is having difficulty in sizing.

Here below is the glitch I encounter:

http://picasaweb.google.com/psysephi...42370344618370

And here is what happens after I rollover to expose the navigation, and then roll off again:

http://picasaweb.google.com/psysephi...42372061735010

As you can see, firing my event scripts somehow rectifies the height problem.

Here is my main javascript file:

Code:
// The primary frameset
var frameset;

function Frameset(startPage)
{
     startPage = startPage || 'main.htm';
     
     var self = this;
     
     this.header =  new Ext.Panel({
                    region: 'north',
                    height: 85,
                    autoLoad:
                    {
                        url     : 'header.htm',
                        text    : 'Loading Header Content...',
                        callback: function(){ frameset.viewport.doLayout(); }
                    }
     });
     
     this.footer =  new Ext.Panel({
                    region: 'south',
                    height: 33,
                    autoLoad:
                    {
                        url     : 'footer.htm',
                        text    : 'Loading Footer Content...',
                        callback: function(){ frameset.viewport.doLayout(); }
                    }
     });

     this.navButtonPanel = new Ext.Panel({
                            region          : 'center',
                            layout          : 'fit',
                            width           : 15,
                            margins         : '0 0 0 0',
                            cmargins        : '0 0 0 0',
                            autoLoad        :
                            {
                                url     : 'expandnav.htm',
                                callback: function(){ frameset.viewport.doLayout(); }
                            }
     });

     this.navLinksPanel = new Ext.Panel({
                            region          : 'east',
                            layout          : 'fit',
                            hidden          : true,
                            width           : 190,
                            autoLoad        :
                            {
                                url     : 'navigation.htm',
                                callback: function(){ frameset.viewport.doLayout(); }
                            }
                            
     });

     this.navigationPanel = new Ext.Panel({
                            region          : 'west',
                            layout          : 'border',
                            hideBorders     : true,
                            split           : false,
                            width           : 15,
                            margins         : '0 0 0 0',
                            cmargins        : '0 0 0 0',
                            items           : [self.navButtonPanel, self.navLinksPanel]
     });
     
     this.contentPanel = new Ext.Panel({
                    region      : 'center',
                    layout      : 'fit',
                    autoLoad:
                    {
                        url     : 'main.htm',
                        text    : 'Loading Main Page...',
                        callback: function(){ frameset.viewport.doLayout(); }
                    },
                    autoShow    : true,
                    autoScroll  : true,
                    minSize     : 600,
                    forceLayout : true
     });
     
     this.viewport =    new Ext.Viewport({
                        layout      : 'border',
                        hideBorders : true,
                        items       : [self.header, self.navigationPanel, self.contentPanel, self.footer]
     });
     
     this.contentUpdater = self.contentPanel.getUpdater();
     self.contentUpdater.loadScripts = true;
     
     this.navigateTo =  function(url)
                        {
                             Ext.History.add(url);
                        }
}



Ext.onReady(function() {
     
     Ext.History.init(); 
     
     // The only requirement for this to work is that you must have a hidden field and
     // an iframe available in the page with ids corresponding to Ext.History.fieldId
     // and Ext.History.iframeId.  See history.html for an example.
     
     var startToken = processStartToken();
     
     frameset = new Frameset(startToken);
     
});

function processStartToken()
{
     //Grab our current Url
     var url = window.location.toString();
     //Remove anchor from url
     var anchor_index = url.indexOf('#');
     var returnToken;
     if (anchor_index != -1) {
          returnToken = url.substring(anchor_index + 1);
     
     return returnToken;
     }
}

// Handle this change event in order to restore the UI to the appropriate history state
Ext.History.on('change', function(token){
     if(token){
          frameset.contentUpdater.update(token);
     }else{
          // This is the initial default state.  Necessary if you navigate starting from the
          // page without any existing history token params and go back to the start state.
          frameset.contentUpdater.update('main.htm');
     }
});

function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }
Here is expandnav.jsp:

HTML Code:
<div style="height:100%" onmouseover="frameset.navLinksPanel.show(); frameset.navButtonPanel.setWidth(0); frameset.navigationPanel.setWidth(190); frameset.viewport.doLayout();">
    <img src="includes/images/expandButton.jpg" alt="Well balls" style="height:100%"/>
</div>
And here is navigation.jsp:

HTML Code:
<div style="height:100%" onmouseout="frameset.navLinksPanel.hide(); frameset.navButtonPanel.setWidth(15); frameset.navigationPanel.setWidth(15); frameset.viewport.doLayout();">
    <img src="includes/images/buttons.jpg" alt="Well balls" style="width:100%"/>
</div>
Any help would be greatly appreciated. If other people have had more success with this type of content using table or anchor layout, please let me know. Keep in mind however, that I would like the center content and many of the widths to size dynamically for different browser resolutions and sizes.