c-909
27 Apr 2007, 11:16 AM
The desire: To take a simple html element that already exists, and make an Ext menu appear when the user's mouse rolls over it.
Why? We could do this by using the toolbar code, but this carries a few disadvantages, to me: less flexible in certain cases; forces the developer to use the Ext button css code when they might already have something that's working just fine; and more complex than most dropdown scripts out there.
The example script:
Below is a full code example, from head to body. Please note it's Not Perfect, and this is where I need help from Jack or other experienced ext devs. In a nutshell, a span exists in the body, and I've attached a mouseover/out event to display the menu. The handler function handles when to display/not the menu.
Current issues: After fruitlessly trying the .within() function to make sure the menu doesn't disappear if the user moves off the rollover button and onto the menu, it works -ok- with a small bit of getRegion().contains code. Still, the menu mouseout event doesn't always fire for an unknown reason to me (my guess is it has to do with the drop-shadow).
I'm sure that the script could be written in a much better way, but my mind is still trying to move from prototype into Ext land. All suggestions/re-writes will be greatly appreciated, as I'm sure I and others can learn more about nuts-and-bolts programming of Ext through this example.
/Charlie
<HTML>
<HEAD>
<script type="text/javascript" src="../include/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../include/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../include/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../include/ext/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript">
var currentMenuStatus='off';
Ext.onReady(function(){
// first, create the menu
testmenu = new Ext.menu.Menu({
id: 'menu',
items: [
new Ext.menu.CheckItem({
text: 'item 1',
checked: true,
// checkHandler: onItemCheck
}),
new Ext.menu.CheckItem({
text: 'item 2',
checked: true,
// checkHandler: onItemCheck
})
],
});
// define the handler for mouseover/out of either button or menu itself
var menuHandler = function(e) {
if(currentMenuStatus=='on')
{
var menu = testmenu.getEl();
var button = Ext.get('rollover_button');
if(!menu.getRegion().contains(e.getPoint()) && !button.getRegion().contains(e.getPoint()))
{
testmenu.hide();
currentMenuStatus='off';
}
}
else
{
testmenu.show('rollover_button');
currentMenuStatus='on';
}
}
// define the events to observe
Ext.get('rollover_button').on('mouseover',menuHandler);
Ext.get('rollover_button').on('mouseout',menuHandler);
testmenu.getEl().on('mouseout',menuHandler);
});
</script>
</HEAD>
<BODY>
<span id='rollover_button' style="margin:5px;background:#dedede;border:1px solid blue">Rollover me!</span>
</BODY>
</HTML>
Why? We could do this by using the toolbar code, but this carries a few disadvantages, to me: less flexible in certain cases; forces the developer to use the Ext button css code when they might already have something that's working just fine; and more complex than most dropdown scripts out there.
The example script:
Below is a full code example, from head to body. Please note it's Not Perfect, and this is where I need help from Jack or other experienced ext devs. In a nutshell, a span exists in the body, and I've attached a mouseover/out event to display the menu. The handler function handles when to display/not the menu.
Current issues: After fruitlessly trying the .within() function to make sure the menu doesn't disappear if the user moves off the rollover button and onto the menu, it works -ok- with a small bit of getRegion().contains code. Still, the menu mouseout event doesn't always fire for an unknown reason to me (my guess is it has to do with the drop-shadow).
I'm sure that the script could be written in a much better way, but my mind is still trying to move from prototype into Ext land. All suggestions/re-writes will be greatly appreciated, as I'm sure I and others can learn more about nuts-and-bolts programming of Ext through this example.
/Charlie
<HTML>
<HEAD>
<script type="text/javascript" src="../include/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../include/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../include/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../include/ext/resources/css/ext-all.css" />
<script language="javascript" type="text/javascript">
var currentMenuStatus='off';
Ext.onReady(function(){
// first, create the menu
testmenu = new Ext.menu.Menu({
id: 'menu',
items: [
new Ext.menu.CheckItem({
text: 'item 1',
checked: true,
// checkHandler: onItemCheck
}),
new Ext.menu.CheckItem({
text: 'item 2',
checked: true,
// checkHandler: onItemCheck
})
],
});
// define the handler for mouseover/out of either button or menu itself
var menuHandler = function(e) {
if(currentMenuStatus=='on')
{
var menu = testmenu.getEl();
var button = Ext.get('rollover_button');
if(!menu.getRegion().contains(e.getPoint()) && !button.getRegion().contains(e.getPoint()))
{
testmenu.hide();
currentMenuStatus='off';
}
}
else
{
testmenu.show('rollover_button');
currentMenuStatus='on';
}
}
// define the events to observe
Ext.get('rollover_button').on('mouseover',menuHandler);
Ext.get('rollover_button').on('mouseout',menuHandler);
testmenu.getEl().on('mouseout',menuHandler);
});
</script>
</HEAD>
<BODY>
<span id='rollover_button' style="margin:5px;background:#dedede;border:1px solid blue">Rollover me!</span>
</BODY>
</HTML>