PDA

View Full Version : Header menu in panel.



mcadirci
6 Sep 2010, 3:31 AM
Hello,

I want to use an existing menu in my north panel. But I have a problem with that. The menu has sub-menus which appears on focus. (like in the screen shot which is attached)

The problems the sliding submenu can't displayed outside panel (I want to see the menu on top of anything else).

Here is my headerPanel which has the menu items.

headerPanel= new Ext.Panel({
region: 'north',
xtype:'panel',
id:'north-panel',
margins:'5 5 0 5',
cmargins:'5 5 0 5',
split: true,
minSize: 0,
maxSize: 200,
collapsible: false,
height: 100,
autoLoad:{
url:'mainHeader.jsp'
}
});

Any help would be great.

Thanks.

--
Mehmet

Condor
6 Sep 2010, 3:37 AM
You have to fix the zindex in your menu.

mcadirci
6 Sep 2010, 4:48 AM
How can I do that?

Editting css element didn't make any difference (with z-index -1 and 0 chrome's firebug showed auto for the property. With value 100 it still doesnt work). Some sample code would be great.

Should I set the z-index for the menu item or the panel which will be like background?

Thanks.

--
Mehmet

Condor
6 Sep 2010, 4:51 AM
The z-index needs to be a high value (e.g. 8000) and it needs to be applied to the drop down element of your menu.

ps. For IE 6 and 7 you also need to apply a higher z-index (e.g. 7999) to the north panel itself.

mcadirci
6 Sep 2010, 5:14 AM
Hello,

I still have problems. Can you please tell from an example (lets take mine) here is the extJs code

headerPanel= new Ext.Panel({
// lazily created panel (xtype:'panel' is default)
region: 'north',
xtype:'panel',
id:'north-panel',
margins:'5 5 0 5',
cmargins:'5 5 0 5',
split: true,
minSize: 0,
maxSize: 200,
collapsible: false,
height: 100,
maskDisabled: true,
autoLoad:{
DialogZIndex: 100,
url:'mainHeader.jsp'
}
});
contentPanel= new Ext.Panel({
xtype:'portal',
region:'center',
margins:'0 5 0 5',
cmargins:'0 5 0 5',
items:[{
columnWidth:1,
//style:'padding:5px 5px 5px 5px',
items:[{
xtype:'panel',
title: 'title',
html:'sample',
collapsible: false
}]
}]
});
//contentPanel.setStyle('z-index','80000');
var api = new ApiPanel();
viewport = new Ext.Viewport({
layout:'border',
items:[
headerPanel,
api,
contentPanel, {
// lazily created panel (xtype:'panel' is default)
region: 'south',
id:'south-panel',
split: true,
height: 0,
minSize: 0,
maxSize: 200,
collapsible: false,
title: '<center><fmt:message key="MsOsmInfo"/></center>',
margins: '0 0 0 0'
}]
});

I give all my li elements style="z-index:11000"

Could you please tell me what is wrong?

Condor
6 Sep 2010, 5:17 AM
1. Add style:'z-index:7999' to the headerPanel.
2. Did you update mainHeader.jsp (or your stylesheet) to use z-index:8000 on the menu drop down?

mcadirci
6 Sep 2010, 5:24 AM
I have updated that but it seems like some other style over rides it. The z-index value seems like auto at firebug. This should be the problem right?

Condor
6 Sep 2010, 5:27 AM
Did you check the correct element?

mcadirci
6 Sep 2010, 7:44 AM
Hello again,

I have been tring to make the menu work but I can't manage that yet.

As at the attached image I set the z-index to smt great but firebug on chrome draws it with auto z-index.

My panel is like
headerPanel= new Ext.Panel({
// lazily created panel (xtype:'panel' is default)
region: 'north',
xtype:'panel',
id:'north-panel',
style:'z-index:17999',
margins:'5 5 0 5',
cmargins:'5 5 0 5',
split: true,
minSize: 0,
maxSize: 200,
collapsible: false,
height: 100,
maskDisabled: true,
autoLoad:{
url:'mainHeader.jsp'
}
});Could the z-index be changed because of autoLoad?

Any ideas? I really got bored this should not be that hard. Any menu sample created with extJs would be fine at this point since it would be easier to build a new one.

Thanks.

--
Mehmet

laurentParis
6 Sep 2010, 8:09 AM
try to change items order and put panel with menu at the end of list items !



viewport = new Ext.Viewport({
layout:'border',
items:[
api,
contentPanel,
/* ..... all others items */
headerPanel
],...