PDA

View Full Version : Shade below menu



JasmineWaters
24 Nov 2009, 3:41 AM
Hi

I have an issue, the north panel in my screen contains menu and I am using the entire center panel for other content. Now when I view the page in a maximised firefox window, the screen looks ok, but when I minimize the window, a shadow is coming below the menu. It occurs randomly even if the window is maximized.
It occurs in IE and google chrome also.

Can you please check the screens attached and help me get rid of the bug?

Thank you!

Condor
24 Nov 2009, 3:55 AM
We'll need to see the config you used to create this layout.

Condor
24 Nov 2009, 4:28 AM
Next time, please use [CODE] tags to post code!!!

Your problem is that the north region has:

contentEl : 'northPanel'

Why? It doesn't contain anything.

JasmineWaters
24 Nov 2009, 4:32 AM
Ok, thank you for the tip. I will use
tag next time.

no, I include the menu.jsp in all my pages, and give my actual page content in div-centerpanel.

I did not post my entire js code. Northpanel has menu toolbar as its content.
[CODE]
Ext.onReady(function() {
Ext.QuickTips.init();

var win, tb;
var menu1 = new Ext.menu.Menu( {
id : 'mainMenu',
style : {
overflow : 'visible'
},
items : [ {
text : 'page11',
icon : './images/preview.png',
handler : onItemClick1
}, {
text : 'page12',
icon : './images/preview.png',
handler : onItemClick2
}, {
text : 'page13',
icon : './images/preview.png',
handler : onItemClick
}, {
text : 'page14',
icon : './images/preview.png',
handler : onItemClick1
}, {
text : 'page15',
icon : './images/preview.png',
handler : onItemClick2
} ]
});

var menu2 = new Ext.menu.Menu( {
id : 'mainMenu1',
style : {
overflow : 'visible'
},
items : [ {
text : 'page21',
icon : './images/preview.png',
handler : onItemClick1
}, {
text : 'page22',
icon : './images/preview.png',
handler : onItemClick2
}, {
text : 'page23',
icon : './images/preview.png',
handler : onItemClick
} ]
});

var menu3 = new Ext.menu.Menu( {
id : 'mainMenu2',
style : {
overflow : 'visible'
},
items : [ {
text : 'page31',
icon : './images/preview.png',
handler : onItemClick1
}, {
text : 'page32',
icon : './images/preview.png',
handler : onItemClick2
} ]
});

tb = new Ext.Toolbar();
// tb.render('toolbar');

tb.add( {
text : 'Menu1',
icon : './images/menu-show.gif',
menu : menu1
});

menu1.addSeparator();

tb.add( {
text : 'Menu2',
icon : './images/menu-show.gif',
menu : menu2
});

menu2.addSeparator();

tb.add( {
text : 'Menu3',
icon : './images/menu-show.gif',
menu : menu3
});

menu3.addSeparator();

function onItemClick(item) {
Ext.Msg.alert('Menu Click',
'You clicked the \'' + item.text + '\'');
}

function onItemClick1(item) {
window.location = "SearchPage.jsp";
}

function onItemClick2(item) {
window.location = "Temp.jsp";
}

new Ext.Viewport( {
layout : 'border',
items : [ {
region : 'north',
autoHeight : true,
border : false,
margins : '0 0 25 0',
collapsible : false,
items : tb,
contentEl : 'northPanel'
}, {
region : 'center',
contentEl : 'centerPanel',
autoScroll : true

} ]
});
});

JasmineWaters
24 Nov 2009, 4:35 AM
It actually contains menu toolbar in the northpanel.

JasmineWaters
24 Nov 2009, 8:11 PM
Hi Condor,

Can you please check the code I have pasted in the previous messages and tell what went wrong?

Thanks!

JasmineWaters
24 Nov 2009, 9:59 PM
I have inspected the menu using firebug.
If I comment the style " position: absolute" of .x-border-panel in ext-all.css, the shade is coming at the bottom of the page instead of sticking to the menu.
In a hidden div, it shows a table with tr as x-toolbar-extras-row.
please tell me how I can avoid this?

Condor
24 Nov 2009, 11:49 PM
Try:

{
region : 'north',
autoHeight : true,
border : false,
margins : '0 0 25 0',
collapsible : false,
items : tb,
//contentEl : 'northPanel'
layout: 'anchor',
defaults: {anchor: '0'}
}

JasmineWaters
25 Nov 2009, 12:07 AM
no, it does not work :(

JasmineWaters
25 Nov 2009, 2:00 AM
I removed the layout property and the menu shade disappeared.

Thanks :)