PDA

View Full Version : Menubar not working in IE



babbarkrishan
14 Apr 2011, 6:10 PM
Hi,

I want to show a menubar in a site. I am using EXT 3.0 for creating menubar. Its working fine in Firefox but not in IE (I checked in IE 8 and IE 9). In IE its only showing first menu while i have two menus.My code is given below and attaching screenshot of both Firefox and IE.



<html>

<head>
<title>Menubar</title>
<script type="text/javascript" src="/o/ext-3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/o/ext-3.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="/o/ext-3.0/resources/css/ext-all.css">
<script type="text/javascript" src="/o/ext-3.0/examples/ux/Ext.ux.MenuBar.js"></script>
<link rel="stylesheet" type="text/css" href="/o/ext-3.0/examples/ux/Ext.ux.MenuBar.css" />




<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "/o/ext-3.0/resources/images/default/s.gif"
var additem = 'hide';
Ext.onReady(function() {

// Header menu First 1 - 10
FullMenuBar1 = Ext.ComponentMgr.create({
xtype : 'menubar',
orientation: 'horizontal'
});

FullMenuBar1.add(
new Ext.menu.Item(
{
id:"id2" ,
text: "BEDDING",
href:"#" ,
align: "center",
menu : new Ext.menu.Menu(
{
items: [
{
handleClick : function(fn){
this.parentMenu.hide();
Ext.checklistAdmin.shopExternal("shop", "2175" , "Empty" );
},
text:"Pillows"
},
{
handleClick : function(fn){
this.parentMenu.hide();
Ext.checklistAdmin.shopExternal("shop", "2177" , "Empty" );
},
text:"Throw pillows"
}
]
}
)
}
),
new Ext.menu.Item(
{
id:"id3" ,
text: "BEDDING3",
href:"#" ,
align: "center",
menu : new Ext.menu.Menu(
{
items: [
{
handleClick : function(fn){
this.parentMenu.hide();
Ext.checklistAdmin.shopExternal("shop", "2503" , "Empty" );
},
text:"Pillows12"
},
{
handleClick : function(fn){
this.parentMenu.hide();
Ext.checklistAdmin.shopExternal("shop", "2504" , "Empty" );
},
text:"Throw pillows12"
}
]
}
)
}
),
{}
);
FullMenuBar1.render(Ext.get("menubar1"));


});
</script>

</head>

<body >

<div class="container">
<table cellpadding=0 cellspacing=0 width=934>

<tr>
<td>

<table cellpadding=0 cellspacing=0 height=27 width=934>
<tr>
<td style="vertical-align:bottom;">
<div id="menubar1"></div>
<div id="menubar2"></div>
</td>
</tr>
</table>

</td>
</tr>
</table>
</div>
</body>
</html>