Print Friendly

Class Ext.menu.Menu

Package:Ext.menu
Class:Menu
Extends:Observable
Subclasses:ColorMenu, DateMenu
Defined In:Menu.js
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).

Properties   -  Methods   -  Events   -  Config Options

Public Properties

This class has no public properties.

Public Methods

Method Defined By
  MenuObject config ) Menu
Creates a new Menu
  addMixed args ) : Ext.menu.Item Menu
Addds one or more items of any type supported by the Menu class, or that can be converted into menu items. Any of the...
  addElementString/HTMLElement/Ext.Element el ) : Ext.menu.Item Menu
Adds an Ext.Element object to the menu
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addItemExt.menu.Item item ) : Ext.menu.Item Menu
Adds an existing object based on Ext.menu.Item to the menu
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  addMenuItemObject config ) : Ext.menu.Item Menu
Creates a new Ext.menu.Item based an the supplied config object and adds it to the menu
  addSeparator() : Ext.menu.Item Menu
Adds a separator bar to the menu
  addTextString text ) : Ext.menu.Item Menu
Creates a new Ext.menu.TextItem with the supplied text and adds it to the menu
  fireEventString eventName, Object... args ) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getEl() : Ext.Element Menu
Returns this menu's underlying Ext.Element object
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners for a specified event
  hide[Boolean deep] ) : void Menu
Hides this menu and optionally all parent menus
  insertNumber index, Ext.menu.Item item ) : Ext.menu.Item Menu
Inserts an existing object based on Ext.menu.Item to the menu at a specified index
  isVisible() : void Menu
Read-only. Returns true if the menu is currently displayed, else false.
  onString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  removeExt.menu.Item item ) : void Menu
Removes an Ext.menu.Item from the menu and destroys the object
  removeAll() : void Menu
Removes and destroys all items in the menu
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  showString/HTMLElement/Ext.Element element, [String position], [Ext.menu.Menu parentMenu] ) : void Menu
Displays this menu relative to another element
  showAtArray xyPosition, [Ext.menu.Menu parentMenu] ) : void Menu
Displays this menu at a specific xy position
  unString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener (shorthand for removeListener)

Public Events

Event Defined By
  beforehide : ( Ext.menu.Menu this ) Menu
Fires before this menu is hidden
  beforeshow : ( Ext.menu.Menu this ) Menu
Fires before this menu is displayed
  click : ( Ext.menu.Menu this, Ext.menu.Item menuItem, Ext.EventObject e ) Menu
Fires when this menu is clicked (or when the enter key is pressed while it is active)
  hide : ( Ext.menu.Menu this ) Menu
Fires after this menu is hidden
  itemclick : ( Ext.menu.BaseItem baseItem, Ext.EventObject e ) Menu
Fires when a menu item contained in this menu is clicked
  mouseout : ( Ext.menu.Menu this, Ext.EventObject e, Ext.menu.Item menuItem ) Menu
Fires when the mouse exits this menu
  mouseover : ( Ext.menu.Menu this, Ext.EventObject e, Ext.menu.Item menuItem ) Menu
Fires when the mouse is hovering over this menu
  show : ( Ext.menu.Menu this ) Menu
Fires after this menu is displayed

Config Options

Config Options Defined By
  allowOtherMenus : Boolean Menu
True to allow multiple menus to be displayed at the same time (defaults to false)
  defaultAlign : String Menu
The default {@link Ext.Element#alignTo) anchor position value for this menu relative to its element of origin (defaul...
  minWidth : Number Menu
The minimum width of the menu in pixels (defaults to 120)
  shadow : Boolean/String Menu
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "si...
  subMenuAlign : String Menu
The Ext.Element.alignTo anchor position value to use for submenus of this menu (defaults to "tl-tr?")

Constructor Details

Menu

public function Menu( Object config )
Creates a new Menu
Parameters:
  • config : Object
    Configuration options

Method Details

add

public function add( Mixed args )
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
This method is defined by Menu.

addElement

public function addElement( String/HTMLElement/Ext.Element el )
Adds an Ext.Element object to the menu
Parameters:
  • el : String/HTMLElement/Ext.Element
    The element or DOM node to add, or its id
Returns:
  • Ext.menu.Item
    The menu item that was added
This method is defined by Menu.

addEvents

public function addEvents( Object object )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
This method is defined by Observable.

addItem

public function addItem( Ext.menu.Item item )
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
This method is defined by Menu.

addListener

public function addListener( String eventName, Function handler, [Object scope], [Object options] )
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 te 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.

    el.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 which passes the same scope object to all handlers:

    el.on({
    			'click': this.onClick,
        		'mouseover': this.onMouseOver,
        		'mouseout': this.onMouseOut,
        		scope: this
    		});
Returns:
  • void
This method is defined by Observable.

addMenuItem

public function addMenuItem( Object config )
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
This method is defined by Menu.

addSeparator

public function addSeparator()
Adds a separator bar to the menu
Parameters:
  • None.
Returns:
  • Ext.menu.Item
    The menu item that was added
This method is defined by Menu.

addText

public function addText( String text )
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
This method is defined by Menu.

fireEvent

public function fireEvent( String eventName, Object... args )
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
This method is defined by Observable.

getEl

public function getEl()
Returns this menu's underlying Ext.Element object
Parameters:
  • None.
Returns:
  • Ext.Element
    The element
This method is defined by Menu.

hasListener

public function hasListener( String eventName )
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
This method is defined by Observable.

hide

public function hide( [Boolean deep] )
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
This method is defined by Menu.

insert

public function insert( Number index, Ext.menu.Item item )
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
This method is defined by Menu.

isVisible

public function isVisible()
Read-only. Returns true if the menu is currently displayed, else false.
Parameters:
  • None.
Returns:
  • void
This method is defined by Menu.

on

public function on( String eventName, Function handler, [Object scope], [Object options] )
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
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

remove

public function remove( Ext.menu.Item item )
Removes an Ext.menu.Item from the menu and destroys the object
Parameters:
  • item : Ext.menu.Item
    The menu item to remove
Returns:
  • void
This method is defined by Menu.

removeAll

public function removeAll()
Removes and destroys all items in the menu
Parameters:
  • None.
Returns:
  • void
This method is defined by Menu.

removeListener

public function removeListener( String eventName, Function handler, [Object scope] )
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
This method is defined by Observable.

show

public function show( String/HTMLElement/Ext.Element element, [String position], [Ext.menu.Menu parentMenu] )
Displays this menu relative to another element
Parameters:
  • element : String/HTMLElement/Ext.Element
    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
This method is defined by Menu.

showAt

public function showAt( Array xyPosition, [Ext.menu.Menu parentMenu] )
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
This method is defined by Menu.

un

public function un( String eventName, Function handler, [Object scope] )
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
This method is defined by Observable.

Event Details

beforehide

public event beforehide
Fires before this menu is hidden
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
This event is defined by Menu.

beforeshow

public event beforeshow
Fires before this menu is displayed
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
This event is defined by Menu.

click

public event click
Fires when this menu is clicked (or when the enter key is pressed while it is active)
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
  • menuItem : Ext.menu.Item
    The menu item that was clicked
  • e : Ext.EventObject
This event is defined by Menu.

hide

public event hide
Fires after this menu is hidden
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
This event is defined by Menu.

itemclick

public event itemclick
Fires when a menu item contained in this menu is clicked
Subscribers will be called with the following parameters:
  • baseItem : Ext.menu.BaseItem
    The BaseItem that was clicked
  • e : Ext.EventObject
This event is defined by Menu.

mouseout

public event mouseout
Fires when the mouse exits this menu
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    The menu item that was clicked
This event is defined by Menu.

mouseover

public event mouseover
Fires when the mouse is hovering over this menu
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
  • e : Ext.EventObject
  • menuItem : Ext.menu.Item
    The menu item that was clicked
This event is defined by Menu.

show

public event show
Fires after this menu is displayed
Subscribers will be called with the following parameters:
  • this : Ext.menu.Menu
This event is defined by Menu.

Config Details

allowOtherMenus

allowOtherMenus : Boolean
True to allow multiple menus to be displayed at the same time (defaults to false)
This config option is defined by Menu.

defaultAlign

defaultAlign : String
The default {@link Ext.Element#alignTo) anchor position value for this menu relative to its element of origin (defaults to "tl-bl?")
This config option is defined by Menu.

minWidth

minWidth : Number
The minimum width of the menu in pixels (defaults to 120)
This config option is defined by Menu.

shadow

shadow : Boolean/String
True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right shadow (defaults to "sides")
This config option is defined by Menu.

subMenuAlign

subMenuAlign : String
The Ext.Element.alignTo anchor position value to use for submenus of this menu (defaults to "tl-tr?")
This config option is defined by Menu.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.