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

This class has no public properties.

## 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

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