Clear Up
SharpKit Reference

Ext.menu Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
CheckItem

A menu item that contains a togglable checkbox by default, but that can also be a part of a radio group.

  
    Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 110,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            xtype: 'menucheckitem',
            text: 'select all'
            },{
            xtype: 'menucheckitem',
            text: 'select specific'
            },{
            iconCls: 'add16',
            text: 'icon item'
            },{
            text: 'regular item'
            }]
            });
            
CheckItemConfig
CheckItemEvents
ColorPicker

A menu containing a Ext.picker.Color Component.

Notes:

  • Although not listed here, the constructor for this class accepts all of the configuration options of Ext.picker.Color.
  • If subclassing ColorMenu, any configuration options for the ColorPicker must be applied to the initialConfig property of the ColorMenu. Applying ColorPicker configuration settings to this will not affect the ColorPicker's configuration.

Example:

  
var colorPicker = Ext.create('Ext.menu.ColorPicker', {
            value: '000000'
            });
            Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 90,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'choose a color',
            menu: colorPicker
            },{
            iconCls: 'add16',
            text: 'icon item'
            },{
            text: 'regular item'
            }]
            });
            
ColorPickerConfig
ColorPickerEvents
DatePicker

A menu containing an Ext.picker.Date Component.

Notes:

  • Although not listed here, the constructor for this class accepts all of the configuration options of Ext.picker.Date.
  • If subclassing DateMenu, any configuration options for the DatePicker must be applied to the initialConfig property of the DateMenu. Applying Date Picker configuration settings to this will not affect the Date Picker's configuration.

Example:

  
var dateMenu = Ext.create('Ext.menu.DatePicker', {
            handler: function(dp, date){
            Ext.Msg.alert('Date Selected', 'You selected ' + Ext.Date.format(date, 'M j, Y'));
            }
            });
            Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 90,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'choose a date',
            menu: dateMenu
            },{
            iconCls: 'add16',
            text: 'icon item'
            },{
            text: 'regular item'
            }]
            });
            
DatePickerConfig
DatePickerEvents
Item

A base class for all menu items that require menu-related functionality such as click handling, sub-menus, icons, etc.

  
    Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 100,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'icon item',
            iconCls: 'add16'
            },{
            text: 'text item'
            },{
            text: 'plain item',
            plain: true
            }]
            });
            
ItemConfig
ItemEvents
KeyNav

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

KeyNavConfig
KeyNavEvents
Manager

Provides a common registry of all menus on a page.

ManagerConfig
ManagerEvents
Menu

A menu object. This is the container to which you may add menu items.

Menus may contain either menu items, or general Components. Menus may also contain docked items because it extends Ext.panel.Panel.

To make a contained general Component line up with other menu items, specify plain: true. This reserves a space for an icon, and indents the Component in line with the other menu items.

By default, Menus are absolutely positioned, floating Components. By configuring a Menu with floating: false, a Menu may be used as a child of a Container.

  
    Ext.create('Ext.menu.Menu', {
            width: 100,
            margin: '0 0 10 0',
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'regular item 1'
            },{
            text: 'regular item 2'
            },{
            text: 'regular item 3'
            }]
            });
            Ext.create('Ext.menu.Menu', {
            width: 100,
            plain: true,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'plain item 1'
            },{
            text: 'plain item 2'
            },{
            text: 'plain item 3'
            }]
            });
            
MenuConfig
MenuEvents
Separator

Adds a separator bar to a menu, used to divide logical groups of menu items. Generally you will add one of these by using "-" in your call to add() or in your items config rather than creating one directly.

  
    Ext.create('Ext.menu.Menu', {
            width: 100,
            height: 100,
            floating: false,  // usually you want this set to True (default)
            renderTo: Ext.getBody(),  // usually rendered by it's containing component
            items: [{
            text: 'icon item',
            iconCls: 'add16'
            },{
            xtype: 'menuseparator'
            },{
            text: 'separator above'
            },{
            text: 'regular item'
            }]
            });
            
SeparatorConfig
SeparatorEvents
© Copyright 2005-2011 SharpKit. All rights reserved.