The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

babbarkrishan (1) [Avatar] Offline
#1
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>


For images please visit below URL:
http://www.sencha.com/forum/showthread.php?130301-Menubar-not-working-in-IE&p=591493#post591493

Thanks
Krishan Babbar