EXT core API details Ext. Menu. menu (17)

Ext. Menu. Menu
Menu object

Config {
Allowothermenus: Boolean // can other menus be displayed simultaneously?
Defaultalign: String // default alignment: TL-Bl?
Defaults: Object // default menu item configuration, which will be applied to all items
Items: Mixed // menu item Array
Minwidth: Number // minimum width. The default value is 120.
Shadow: Boolean/string //
Submenualign: String // sub-menu alignment TL-tr?
}

Menu (Object config)
Structure

Add (mixed ARGs): Ext. Menu. Item
Add menu item
Possible parameters:
* Menu item objects inherited from Ext. Menu. Item
* Htmlelement objects that can be converted to menu items
* A config object constructed by Ext. Menu. Item
* A string,-or separator, is a separator, and others are used as construction parameters of the textitem object.

Addelement (mixed El): Ext. Menu. Item
Add Element Object

Additem (ext. Menu. item): Ext. Menu. Item
Add item object

Addmenuitem (Object config): Ext. Menu. Item
Add the item object. The input parameter is the config parameter constructed by the item.

Addseparator (): Ext. Menu. Item
Add interval item

Addtext (string text): Ext. Menu. Item
Add text item

Getel (): Ext. Element
Get the current Element Object

Hide ([Boolean deep]): void
Hide

Insert (number index, ext. Menu. item): Ext. Menu. Item
Insert item at index position
Isvisible (): void
Visible?

Remove (ext. Menu. item): void
Remove item

Removeall (): void
Remove all

Show (Mixed Element, [String position], [Ext. Menu. Menu parentmenu]): void
Displays the current menu relative to the element

Showat (array xyposition, [Ext. Menu. Menu parentmenu]): void
Display the current menu in the absolute position xyposition

Ext. Menu. baseitem
The base class of all menu items, inherited from component

Config {
Activeclass: String // style class when active, X-menu-item-active by default
Canactivate: Boolean // can be set to active? The default value is false.
Handler: function // event processing handle
Hidedelay: Number // The interval for automatic hiding. The default value is 100 (MS)
Hideonclick: Boolean // hide automatically after clicking. The default value is true.
}

Baseitem (Object config)
Structure

Sethandler (function handler, object scope): void
Set processing handle Handler

Event:
Activate: (ext. Menu. baseitem this)
Click: (ext. Menu. baseitem this, ext. eventobject E)
Deactivate: (ext. Menu. baseitem this)

Ext. Menu. Adapter
This class is used to convert containers of non-baseitem sub-classes into adapters that support baseitem, except for the construction, which is similar to baseitem.
Adapter (Ext. Component component, object config), which can be inherited by itself to do some practical work. Its Two subclasses are more useful.

Ext. Menu. colormenu
Color Selection
Ext. Menu. dateitem
Date Selection

Ext. Menu. Item
It is another practical subclass of baseitem. It provides general menu items and supports the relationship between menu items.
Config {
Canactivate: Boolean
Href: String
Hreftarget: String
Icon: String // The default Ext. blank_image_url. We recommend that you change it. extjs.com is too slow.
Iconcls: String
Itemcls: String
Showdelay: Number
Text: String
}
Method
Item (Object config)
Structure

Seticonclass (string CLs): void
Settext (string text): void

Ext. Menu. checkitem
Inherited from item. The menu items with a selection box are prefixed.
Config {
Checked: Boolean
GROUP: String
Groupclass: String // default X-menu-group-item
Itemcls: String
}

Method
Checkitem (Object config)
Structure

Checkhandler (ext. Menu. checkitem this, Boolean checked): void
Select Handling Method

Setchecked (Boolean checked, [Boolean suppressevent]): void
Set selection status

Event
Beforecheckchange: (ext. Menu. checkitem this, Boolean checked)
Checkchange: (ext. Menu. checkitem this, Boolean checked)

Ext. Menu. Separator
Inherited from item, interval item

Ext. Menu. textitem
Inherited from item, text item
Config {
Hideonclick: Boolean
Itemcls: String
Text: String
}

The following example is from the official ext and continues simple modification. Only the menu-related sections are simple.

Ext. quicktips. INIT ();

// Date selection Click Event
VaR datemenu = new Ext. Menu. datemenu ({
Handler: function (DP, date ){
Ext. MessageBox. Alert ('date selected', String. Format ('You chose {0}. ', date. Format ('m J, y ')));
}
});

VaR colormenu = new Ext. Menu. colormenu ({
Handler: function (CM, color ){
Ext. MessageBox. Alert ('color selected', String. Format ('You chose # {0}. ', CM. palette. Value ));
}
});

VaR menu = new Ext. Menu. menu ({
ID: 'mainmenu ',
Items :[
{
Text: 'I like ext ',
Checked: True,
Checkhandler: onitemcheck
},
{
Text: 'ext for jquery ',
Checked: True,
Checkhandler: onitemcheck
},
{
Text: 'I donated! ',
Checked: false,
Checkhandler: onitemcheck
},'-',{
Text: 'Radio options ',
Menu :{
Items :[
'<B class = "menu-title"> choose a theme </B> ',
{
Text: 'aero glass ',
Checked: True,
GROUP: 'Theme ',
Checkhandler: onitemcheck
},{
Text: 'Vista Black ',
Checked: false,
GROUP: 'Theme ',
Checkhandler: onitemcheck
},{
Text: 'Gray theme ',
Checked: false,
GROUP: 'Theme ',
Checkhandler: onitemcheck
},{
Text: 'default theme ',
Checked: false,
GROUP: 'Theme ',
Checkhandler: onitemcheck
}
]
}
},{
Text: 'Choose A date ',
Iconcls: 'calendar ',
Menu: datemenu
},{
Text: 'Choose A color ',
Menu: colormenu
}
]
});

VaR TB = new Ext. toolbar ();
TB. Render (ext. getbody ());

TB. Add ({
Text: 'button w/menu ',
Iconcls: 'bmenus ', // <-- icon
Menu: menu // assign menu by instance
}
);

Menu. addseparator ();
// Menus have a rich API
// Adding and removing elements dynamically
VaR item = menu. Add ({
Text: 'dynamically added item'
});
// Items support full observable API
Item. On ('click', onitemclick );

// Items can easily be looked up
Menu. Add ({
Text: 'Disabled item ',
ID: 'disableme' // <-- items can also have an ID for easy Lookup
// Disabled: True <-- allowed but for sake of example we use long way below
});
// Access items by ID or index
Menu. Items. Get ('disableme'). Disable ();

// This method of adding a sub-menu is illustrated by a cat and a tiger. What is add? Getxtype is not available. item has a private attribute menu?
VaR ele = menu. Add ({
Text: 'submit ',
Menu :{
Items :[
{Text: 'submenu1', Handler: onitemclick },
{Text: 'submenu2 ', Handler: onitemclick}
]
}
});

 

// Functions to display feedback
Function onbuttonclick (BTN ){
Ext. MessageBox. Alert ('button click', String. Format ('You clicked the "{0}" button. ', BTN. Text ));
}

Function onitemclick (item ){
Ext. MessageBox. Alert ('menu click', String. Format ('You clicked the "{0}" menu item. ', item. Text ));
}

Function onitemcheck (item, checked ){
Ext. MessageBox. Alert ('item check', String. Format (you {1}
"{0}" menu item. ', item. Text, checked? 'Checked': 'unchecked '));
}

Function onitemtoggle (item, pressed ){
Ext. MessageBox. Alert ('button toggled', String. Format ('button "{0}" was toggled to {1}. ', item. Text, pressed ));
}