Ext.Viewport with Menu in North Region problem...

Question

Hello...

I have a Ext.Viewport in my page... In North region, I have a Dropdown Menu... But When I mouse over a menu item, the menu items drop down but the items appear below the Center region panel. I have been unable to get this to work. I tried setting the z-index but no luck at all.

Help?

Thanks

Answer 1

You are not providing enough info. I assume that your center region contains an iframe, flash component or something similar?

Answer 2

I've solved the issue by assigning the region an id and creating a CSS definition.

     var viewport = new Ext.Viewport({
        layout: 'border',
        renderTo: Ext.getBody(),
        border: false,
        items: [{
            height: 60,
            region : 'south',
            contentEl: 'page-footer',
            border: false
        }, {
            region : 'center',
            contentEl: 'page-main',
            border: false
        }, {
            height : 90,
            id: 'page-header-panel',
            region : 'north',
            contentEl: 'page-header',
            border: false
        }]
    });

CSS

#page-header-panel .x-panel-body,
#page-header-panel .x-panel-bwrap {
   overflow: visible;
}