PDA

View Full Version : Ext Js BorderLayout North Region Panel dropdown menus not shown due to Center Region



funnyfox
16 Jun 2014, 4:37 AM
Hi

My Ext Js BorderLayout North Region has a HTML CSS menu, when I hover the mouse the dropdown menu is coming but it is not shown due to Center Region. I tried tweaking z-index, overflow by verifying sencha forums but it is not working. Can any one help me. Here is my code


this.navigationStr =
'<div class="main_menu" style="z-index:20000;">'+
'<ul>'+
'<li><a href="#">Home</li>'+
'<li><a href="#">Menu1</a>'+
'<ul><li><a href="#">SubMenu1</a></li>'+
'</ul></li>'+
'<li><a href="#">Menu2</li>'+
'<li><a href="#">Menu3</li>'+
'<li><a href="#">Menu4</li>'+
'<li><a href="#">Menu5</li>'+
'</ul>'+
'</div>';

this.centerLayout = new Ext.create('Ext.panel.Panel',{
region: 'center',
renderTo:Ext.getBody(),
id: 'mainLayoutPanel',
border: false,
layout: 'card',
items: [ this.homePanel,
{
xtype : "component",
itemId: 'reportMgmtPanel',
autoEl : {
tag : "iframe",
src : "/jsp/myView.jsp?t="+(new Date()).getTime()
}
}
]
});







this.mainViewport = Ext.create('Ext.container.Viewport',{
layout: 'border',
renderTo:Ext.getBody(),
items: [{
region: 'north',
id: 'page-header-panel',
html:
//some html code divs and table tags etc
'<div class="headingBar"> '+
this.navigationStr +
'</div>',
border: false,
margins: '0 0 5 0'
},this.centerLayout]



And My CSS is as follows



.main_menu
{
height:30px;
line-height:30px;
color:#FFF;
/* position:relative; */
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
.main_menu ul
{
padding:0px;
margin:0;
list-style:none;
position: absolute;
z-index : 99999;
}
.main_menu ul li
{
padding:0;
margin:0;
border-right:1px solid #000000;
float:left;
background:#333333;
/* z-index:9999; */
}
.main_menu ul li a
{
color:#FFF;
display:block;
text-decoration:none;
padding:0 25px;
}
.main_menu ul li a:hover
{
background:#3ea5ea;
color:#000;
}
.main_menu ul li ul
{
display: none;
width: auto;
/* position:relative; */
top:30px;
padding:0px;
margin:0px;
/* z-index:9999; */
}
.main_menu ul li:hover ul
{
display: block;
/* position: absolute; */
margin: 0;
padding: 0;
/* z-index:9999; */
}
.main_menu ul li:hover li
{
float: none;
list-style:none;
margin:0px;
}
.main_menu ul li:hover li
{
background:#333;
border-top:1px solid #000000;
}
.main_menu ul li:hover li a
{
color: #fff;
padding:0 20px;
display:block;
width:170px;
}
.main_menu ul li li a:hover
{
color:#000;
}


.north, .north .x-panel-bwrap, .north .x-panel-body {
overflow: visible !important;
}

Gary Schlosberg
16 Jun 2014, 9:38 AM
If your center region is an iframe, I don't believe z-index will help as it is a separate web page.

funnyfox
16 Jun 2014, 10:50 AM
I just commented out the items available in centerlayout and tried, but it is not working



this.centerLayout = new Ext.create('Ext.panel.Panel',
{
region: 'center',
renderTo:Ext.getBody(),
id: 'mainLayoutPanel',
border: false,
layout: 'card', items: [
// this.homePanel,
//{

// xtype : "component",
// itemId: 'reportMgmtPanel',
// autoEl : {
// tag : "iframe",
// src : "/jsp/myView.jsp?t="+(new Date()).getTime()
// }
// }

] });

Gary Schlosberg
16 Jun 2014, 9:06 PM
So the center region of your border layout is itself a card layout with an iframe in one panel? I think if you remove all of the items from a card layout it will cause an error.

funnyfox
19 Jun 2014, 5:40 AM
I think this will never work, I think I should use some ext menus instead of Html menus in north region.

Can you point me to any links where there are some examples for menu's implementation for Ext Js application. The menus which I am looking are for my applications main page.

Gary Schlosberg
19 Jun 2014, 6:34 AM
There's a Toolbars and Menus section in the examples that might help.
http://docs.sencha.com/extjs/4.2.1/#!/example/menu/menus.html