PDA

View Full Version : [FIXED][3.*] Ext.Menu hiding cascades through all parentMenus even when non-floating



Animal
7 Jul 2009, 7:52 AM
Only floating menus may be auto-hidden by their children.

The following fixes are needed:



Ext.override(Ext.menu.BaseItem, {
handleClick : function(e){
if(this.hideOnClick && this.parentMenu.floating){
this.parentMenu.hide.defer(this.clickHideDelay, this.parentMenu, [true]);
}
}
});

Ext.override(Ext.menu.Menu, {
onHide : function(){
Ext.menu.Menu.superclass.onHide.call(this);
this.deactivateActive();
if(this.el && this.floating){
this.el.hide();
}
if(this.deepHide === true && this.parentMenu && this.parentMenu.floating){
this.parentMenu.hide(true);
}
}
});


A test case which drops into examples/menu. Without that fix, the hiding of the floating menu on menu item click hides the non-floating menu bar.



<!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>Application Menubar with Menus</title>

<!-- Ext Files -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- Global Demo Files -->
<link rel="stylesheet" type="text/css" href="global.css" />
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
Ext.onReady(function() {
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var tb = new Ext.menu.Menu({
region: 'north',
height: 28,
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
items: [{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
}

function checkHandler() {
alert('Checked a menu item');
}

new Ext.Viewport({
layout: 'border',
items: [ tb, {
region: 'west',
title: 'West',
width: 200
}, {
region: 'center',
title: 'Center'
}]
});

});
</script>
</head>
<body></body>
</html>


Put this in the same directory: http://i131.photobucket.com/albums/p286/TimeTrialAnimal/horizontal-menu-parent.gif

evant
7 Jul 2009, 6:41 PM
Looks pretty good. One thing I noticed is that it still highlights the menu with your fix, I was thinking:



if(this.hideOnClick){
if(pm.floating){
pm.hide.defer(this.clickHideDelay, pm, [true]);
}else{
pm.deactivateActive();
}
}




if(this.deepHide === true && pm){
if(pm.floating){
pm.hide(true);
}else{
pm.deactivateActive();
}
}


Might be more appropriate, what do you reckon?

Animal
7 Jul 2009, 9:05 PM
Good catch. Deactivation should cascade up obviously. (hmmm... wasn't obvious to me though! :-?)

evant
7 Jul 2009, 9:33 PM
Committed to the trunk.