PDA

View Full Version : Multi level menu not working in IE 7 & 8



mrag74
25 Apr 2010, 9:36 AM
Hi,

I have modified the menus.html and menus.js files in ExtJs samples to createa multi level menu. The new code is working fine in FireFox but not in TE. Could someone help me.

menus1.js
=======
/*!
* Ext JS Library 3.1.1
* Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// Menus can be prebuilt and passed by reference
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state'],
data : Ext.exampledata.states // from states.js
});
var combo = new Ext.form.ComboBox({
store: store,
displayField: 'state',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true,
width: 135,
getListParent: function() {
return this.el.up('.x-menu');
},
iconCls: 'no-icon'
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
//combo, // A Field in a Menu
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, '-', {
text: 'Select State',
menu: { // <-- submenu by nested config object
items: [combo]
}
},{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- submenu by reference
},{
text: 'Choose a Color',
menu: colorMenu // <-- submenu by reference
}
]
});
var tb = new Ext.Toolbar();
tb.render('toolbar');
tb.add({
text:'Button w/ Menu',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
});

tb.doLayout();
// functions to display feedback
function onButtonClick(btn){
Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
}
function onItemClick(item){
Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
}
function onItemCheck(item, checked){
Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
}
function onItemToggle(item, pressed){
Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
}
});


menus1.html
=========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Toolbar with Menus</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../form/states.js"></script>
<script type="text/javascript" src="menus1.js"></script>
<link rel="stylesheet" type="text/css" href="menus.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>

<div id="container">
<div id="toolbar"></div>
</div>
<br /><br /><br /><br /><br />
</body>
</html>




Thanks,
Rag

mrag74
25 Apr 2010, 12:51 PM
Never mind .. I fixed the problem. Changes are in green text ..

{
text: 'Select State',
menu: { // <-- submenu by nested config object


style : {
overflow: 'visible' // For the Combo popup
},
items: [combo]
}