Properties Methods Events Config Options Direct Link

    Observable
      Menu

# Class Ext.menu.Menu

Package: | Ext.menu
Defined In: | Menu.js
Class: | Menu
Subclasses: | ColorMenu, DateMenu
Extends: | Observable

A menu object. This is the container to which you add all other menu items. Menu can also serve a as a base class when you want a specialzed menu based off of another component (like Ext.menu.DateMenu for example).

## Config Options

Config Options | Defined By
--- | ---
| allowOtherMenus : Boolean True to allow multiple menus to be displayed at the same time (defaults to false) | Menu
| defaultAlign : String The default {@link Ext.Element#alignTo) anchor position value for this menu relative to its element of origin (defaul... The default {@link Ext.Element#alignTo) anchor position value for this menu relative to its element of origin (defaults to "tl-bl?") | Menu
| defaults : Object A config object that will be applied to all items added to this container either via the items config or via the add ... A config object that will be applied to all items added to this container either via the items config or via the add method. The defaults config can contain any number of name/value property pairs to be added to each item, and should be valid for the types of items being added to the menu. | Menu
| items : Mixed An array of items to be added to this menu. See add for a list of valid item types. | Menu
| listeners : Object A config object containing one or more event handlers to be added to this object during initialization. This should b... A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. | Observable
| minWidth : Number The minimum width of the menu in pixels (defaults to 120) | Menu
| shadow : Boolean/String True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "si... True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "sides") | Menu
| subMenuAlign : String The Ext.Element.alignTo anchor position value to use for submenus of this menu (defaults to "tl-tr?") | Menu

## Public Properties

Property | Defined By
--- | ---
| items : Ext.util.MixedCollection A MixedCollection of this Menu's items | Menu

## Public Methods

Method | Defined By
--- | ---
| Menu( `Object config` ) Creates a new Menu Creates a new Menu Parameters: `config` : Object Configuration options Returns: `` | Menu
| add( `Mixed args` ) : Ext.menu.Item Addds one or more items of any type supported by the Menu class, or that can be converted into menu items. Any of the... Addds one or more items of any type supported by the Menu class, or that can be converted into menu items. Any of the following are valid: Any menu item object based on Ext.menu.Item An HTMLElement object which will be converted to a menu item A menu item config object that will be created as a new menu item A string, which can either be '-' or 'separator' to add a menu separator, otherwise it will be converted into a Ext.menu.TextItem and added Usage:
    // Create the menu
    var menu = new Ext.menu.Menu();

    // Create a menu item to add by reference
    var menuItem = new Ext.menu.Item({ text: 'New Item!' });

    // Add a bunch of items at once using different methods.
    // Only the last item added will be returned.
    var item = menu.add(
        menuItem,                // add existing item by ref
        'Dynamic Item',          // new TextItem
        '-',                     // new separator
        { text: 'Config Item' }  // new item by config
    );
Parameters: `args` : Mixed One or more menu items, menu item configs or other objects that can be converted to menu items Returns: `Ext.menu.Item` The menu item that was added, or the last one if multiple items were added | Menu
| addElement( `Mixed el` ) : Ext.menu.Item Adds an Ext.Element object to the menu Adds an Ext.Element object to the menu Parameters: `el` : Mixed The element or DOM node to add, or its id Returns: `Ext.menu.Item` The menu item that was added | Menu
| addEvents( `Object object` ) : void Used to define events on this Observable Used to define events on this Observable Parameters: `object` : Object The object with the events defined Returns: `void` | Observable
| addItem( `Ext.menu.Item item` ) : Ext.menu.Item Adds an existing object based on Ext.menu.Item to the menu Adds an existing object based on Ext.menu.Item to the menu Parameters: `item` : Ext.menu.Item The menu item to add Returns: `Ext.menu.Item` The menu item that was added | Menu
- | addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this component Appends an event handler to this component Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope in which to execute the handler function. The handler function's "this" context. `options` : Object (optional) An object containing handler configuration properties. This may contain any of the following properties: scope : Object The scope in which to execute the handler function. The handler function's "this" context. delay : Number The number of milliseconds to delay the invocation of the handler after the event fires. single : Boolean True to add a handler to handle just the next firing of the event, and then remove itself. buffer : Number Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. Combining Options Using the options argument, it is possible to combine different types of listeners: A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
      el.on('click', this.onClick, this, {
          single: true,
          delay: 100,
          forumId: 4
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
      foo.on({
          'click' : {
              fn: this.onClick,
              scope: this,
              delay: 100
          },
          'mouseover' : {
              fn: this.onMouseOver,
              scope: this
          },
          'mouseout' : {
              fn: this.onMouseOut,
              scope: this
          }
      });
  Or a shorthand syntax:
      foo.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });
Returns: `void` | Observable
| addMenuItem( `Object config` ) : Ext.menu.Item Creates a new Ext.menu.Item based an the supplied config object and adds it to the menu Creates a new Ext.menu.Item based an the supplied config object and adds it to the menu Parameters: `config` : Object A MenuItem config object Returns: `Ext.menu.Item` The menu item that was added | Menu
| addSeparator() : Ext.menu.Item Adds a separator bar to the menu Adds a separator bar to the menu Parameters: None. Returns: `Ext.menu.Item` The menu item that was added | Menu
| addText( `String text` ) : Ext.menu.Item Creates a new Ext.menu.TextItem with the supplied text and adds it to the menu Creates a new Ext.menu.TextItem with the supplied text and adds it to the menu Parameters: `text` : String The text to display in the menu item Returns: `Ext.menu.Item` The menu item that was added | Menu
| destroy() : void Destroys the menu by unregistering it from Ext.menu.MenuMgr, purging event listeners, removing all of the menus item... Destroys the menu by unregistering it from Ext.menu.MenuMgr, purging event listeners, removing all of the menus items, then destroying the underlying Ext.Element Parameters: None. Returns: `void` | Menu
| fireEvent( `String eventName`, `Object... args` ) : Boolean Fires the specified event with the passed parameters (minus the event name). Fires the specified event with the passed parameters (minus the event name). Parameters: `eventName` : String `args` : Object... Variable number of parameters are passed to handlers Returns: `Boolean` returns false if any of the handlers return false otherwise it returns true | Observable
| getEl() : Ext.Element Returns this menu's underlying Ext.Element object Returns this menu's underlying Ext.Element object Parameters: None. Returns: `Ext.Element` The element | Menu
| hasListener( `String eventName` ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners for a specified event Parameters: `eventName` : String The name of the event to check for Returns: `Boolean` True if the event is being listened for, else false | Observable
| hide( [`Boolean deep`] ) : void Hides this menu and optionally all parent menus Hides this menu and optionally all parent menus Parameters: `deep` : Boolean (optional) True to hide all parent menus recursively, if any (defaults to false) Returns: `void` | Menu
| insert( `Number index`, `Ext.menu.Item item` ) : Ext.menu.Item Inserts an existing object based on Ext.menu.Item to the menu at a specified index Inserts an existing object based on Ext.menu.Item to the menu at a specified index Parameters: `index` : Number The index in the menu's list of current items where the new item should be inserted `item` : Ext.menu.Item The menu item to add Returns: `Ext.menu.Item` The menu item that was added | Menu
| isVisible() : void Read-only. Returns true if the menu is currently displayed, else false. Read-only. Returns true if the menu is currently displayed, else false. Parameters: None. Returns: `void` | Menu
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this element (shorthand for addListener) Appends an event handler to this element (shorthand for addListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope in which to execute the handler function. The handler function's "this" context. `options` : Object (optional) Returns: `void` | Observable
| purgeListeners() : void Removes all listeners for this object Removes all listeners for this object Parameters: None. Returns: `void` | Observable
| remove( `Ext.menu.Item item` ) : void Removes an Ext.menu.Item from the menu and destroys the object Removes an Ext.menu.Item from the menu and destroys the object Parameters: `item` : Ext.menu.Item The menu item to remove Returns: `void` | Menu
| removeAll() : void Removes and destroys all items in the menu Removes and destroys all items in the menu Parameters: None. Returns: `void` | Menu
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener Removes a listener Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable
| resumeEvents() : void Resume firing events. (see suspendEvents) Resume firing events. (see suspendEvents) Parameters: None. Returns: `void` | Observable
| show( `Mixed element`, [`String position`], [`Ext.menu.Menu parentMenu`] ) : void Displays this menu relative to another element Displays this menu relative to another element Parameters: `element` : Mixed The element to align to `position` : String (optional) The Ext.Element.alignTo anchor position to use in aligning to the element (defaults to this.defaultAlign) `parentMenu` : Ext.menu.Menu (optional) This menu's parent menu, if applicable (defaults to undefined) Returns: `void` | Menu
| showAt( `Array xyPosition`, [`Ext.menu.Menu parentMenu`] ) : void Displays this menu at a specific xy position Displays this menu at a specific xy position Parameters: `xyPosition` : Array Contains X & Y [x, y] values for the position at which to show the menu (coordinates are page-based) `parentMenu` : Ext.menu.Menu (optional) This menu's parent menu, if applicable (defaults to undefined) Returns: `void` | Menu
| suspendEvents() : void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters: None. Returns: `void` | Observable
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener (shorthand for removeListener) Removes a listener (shorthand for removeListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable

## Public Events

Event | Defined By
--- | ---
| beforehide : ( `Ext.menu.Menu this` ) Fires before this menu is hidden Fires before this menu is hidden Listeners will be called with the following arguments: `this` : Ext.menu.Menu | Menu
| beforeshow : ( `Ext.menu.Menu this` ) Fires before this menu is displayed Fires before this menu is displayed Listeners will be called with the following arguments: `this` : Ext.menu.Menu | Menu
| click : ( `Ext.menu.Menu this`, `Ext.menu.Item menuItem`, `Ext.EventObject e` ) Fires when this menu is clicked (or when the enter key is pressed while it is active) Fires when this menu is clicked (or when the enter key is pressed while it is active) Listeners will be called with the following arguments: `this` : Ext.menu.Menu `menuItem` : Ext.menu.Item The menu item that was clicked `e` : Ext.EventObject | Menu
| hide : ( `Ext.menu.Menu this` ) Fires after this menu is hidden Fires after this menu is hidden Listeners will be called with the following arguments: `this` : Ext.menu.Menu | Menu
| itemclick : ( `Ext.menu.BaseItem baseItem`, `Ext.EventObject e` ) Fires when a menu item contained in this menu is clicked Fires when a menu item contained in this menu is clicked Listeners will be called with the following arguments: `baseItem` : Ext.menu.BaseItem The BaseItem that was clicked `e` : Ext.EventObject | Menu
| mouseout : ( `Ext.menu.Menu this`, `Ext.EventObject e`, `Ext.menu.Item menuItem` ) Fires when the mouse exits this menu Fires when the mouse exits this menu Listeners will be called with the following arguments: `this` : Ext.menu.Menu `e` : Ext.EventObject `menuItem` : Ext.menu.Item The menu item that was clicked | Menu
| mouseover : ( `Ext.menu.Menu this`, `Ext.EventObject e`, `Ext.menu.Item menuItem` ) Fires when the mouse is hovering over this menu Fires when the mouse is hovering over this menu Listeners will be called with the following arguments: `this` : Ext.menu.Menu `e` : Ext.EventObject `menuItem` : Ext.menu.Item The menu item that was clicked | Menu
| show : ( `Ext.menu.Menu this` ) Fires after this menu is displayed Fires after this menu is displayed Listeners will be called with the following arguments: `this` : Ext.menu.Menu | Menu