|
|||||||
 |
|
|
Thread Tools |
|
#1
04-27-2007, 03:16 PM
|
|||
|
|||
simple dropdown menu without using Button
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> 
|
|
#2
04-30-2007, 06:13 PM
|
||||
|
||||
|
Funny, I was just about to look for this kind of functionality. I'll have a look at what you have worked up here...
|
|
#3
05-01-2007, 05:13 AM
|
||||
|
||||
|
There are ongoing discussions about a MenuBar class here: http://extjs.com/forum/showthread.php?t=2774
It is activated on click rather than rollover, though once activated, rolling over other menu bar items closes the old one, and opens the one rolled over. Ideally, activate on rollover should be a config option.
|
|
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT -5. The time now is 08:11 AM.
