Extjs usage Summary (6)-toolbar and menu

Document directory

• 1. simple menu
• 2. Add a separator to the menu
• 3. Multi-level menu
• Iv. Advanced menu
• V. Summary

There are many types of menus, including drop-down menus, group menus, and right-click menus. The shortcut menu has the same effect as the shortcut menu on the window desktop, but the style is different, the menu content includes text, single button, and buttons. For Ext, the implementation of these menus is very simple.

You can place a horizontal button at the top or bottom of a panel. Different operations are performed when you press different buttons. We call this horizontal bar a toolbar. The buttons placed on the toolbar are called menus. This chapter describes how to use the toolbar and menu in ext.

1. simple menu

The method for creating a simple toolbar is as follows. Note that the HTML code must be: <Div id = "toolbar"> </div>

The process roughly includes: first create a toolbar, use the render () function of the toolbar to render it on the DIV, then call the Add function of the toolbar, and add four buttons to the toolbar, you can also add and click to process events.

Ext. onready (function () {<br/> var TB = new Ext. toolbar (); <br/> TB. render ('toolbar'); </P> <p> TB. add ({<br/> text: "create N", <br/> handler: function () {<br/> Ext. MSG. alert ('hint ', 'new'); <br/>}< br/>},{ <br/> text: "Modify C" <br/> }, {<br/> text: "delete" <br/>},{ <br/> text: "show" <br/> });

Result 1:

Figure 1 simple Toolbar

2. Add a separator to the menu

The separation line display is a horizontal line. You can use it to separate different types of menu items in the menu. There are two ways to add a separation line to the menu in ext.

1. Use a hyphen or 'separator' as the parameter, as shown in the following code:

VaR menu1 = new Ext. menu. menu ({<br/> items: [<br/> {text: 'menu 1'}, <br/> {text: 'menu 2'} <br/>] <br/>}); <br/> // menu1.add ('-'); <br/> menu1.add ('separator'); <br/> var TB = new Ext. toolbar (); <br/> TB. render ('toolbar'); </P> <p> TB. add ({<br/> text: 'new', <br/> menu: menu1 <br/> });

2. Use the Ext. Menu. Separator instance as the parameter, as shown in the following code:

Menu1.add (New Ext. Menu. separator ()); 

The specific effect is as follows:

Figure 2.1 No separator Effect

Figure 2.2 separation line

3. Multi-level menu

The drop-down menu can be nested, and the number of layers of nesting seems arbitrary. Let's first look at a menu with two layers of structure. The implementation method is very simple, add a menu parameter to the drop-down menu and specify the corresponding sub-menu, as shown in the following code:

VaR menuhistory = new Ext. menu. menu ({<br/> items: [<br/> {text: 'Today '}, <br/> {text: 'Yesterday '}, <br/> {text: 'Week' },< br/> {text: 'Year'} <br/>] <br/> }); </P> <p> var menufile = new Ext. menu. menu ({<br/> items: [{<br/> text: 'new' <br/>},{ <br/> text: 'Open '<br/>},{ <br/> text: 'save' <br/>},{ <br/> text: 'hire', menu: menuhistory <br/>},{ <br/> text: 'close' <br/>}] <br/> }); </P> <p> var TB = new Ext. toolbar (); <br/> TB. render ('toolbar'); </P> <p> TB. add ({<br/> text: 'file', <br/> menu: menufile <br/> });

The implementation is as follows:

Figure 3 nested menu with two layers

In the above example, we can directly use the menu parameter to specify which part of the menu to add a sub menu. With these methods, we can easily implement the functional menus we want.

Iv. Advanced menu

In addition to the most basic menu buttons mentioned above, ext also provides some complex menu controls for us to directly call, this section describes how to use these advanced menus and Their instances.

4.1 select multiple menus and single-choice menus

We use Ext. menu. the text parameter indicates the text displayed on the menu, and the checked parameter indicates whether the current menu item is selected. checkhandler is used to specify the processing menu executed when the menu is selected. the single-choice menu is similar. The specific code is as follows:

VaR menucheckbox = new Ext. menu. menu ({<br/> items: [<br/> New Ext. menu. checkitem ({<br/> text: 'bold', <br/> checked: True, <br/> checkhandler: function (item, checked) {<br/> Ext. MSG. alert ('Multiple select', (checked? 'Select': 'cancel') + 'bold'); <br/>}< br/>}), <br/> New Ext. menu. checkitem ({<br/> text: 'italic', <br/> checked: True, <br/> checkhandler: function (item, checked) {<br/> Ext. MSG. alert ('Multiple select', (checked? 'Select': 'cancel') + 'italic'); <br/>}< br/>}) <br/>] <br/> }) <br/> var TB = new Ext. toolbar (); <br/> TB. render ('toolbar'); </P> <p> TB. add ({<br/> text: 'font', <br/> menu: menucheckbox <br/> });

4.

Figure 4 multiple menus

4.2 time menu

EXT provides us with the date selection menu Ext. Menu. datemenu, which allows us to directly add the date selection function to the menu. The implementation code is as follows:

TB. add ({<br/> text: 'date', <br/> menu: New Ext. menu. datemenu ({<br/> handler: function (DP, date) {<br/> Ext. MSG. alert ('select date', 'the date you selected is {0 }. ', date. format ('y, M, dday'); <br/>}< br/>}) <br/> });

Note: In this case, ext. Menu. datemenu is a menu instead of a menuitem. You should use the menu parameter to set it as a sub-menu of the upper menu. Implementation 5 is shown.

Figure 5 Date menu

4.3 color menu

EXT provides the color selection function menu Ext. Menu. colormenu, as shown in 6.

Figure 6 color menu

Although the color selection menu is not commonly used, its effect is very brilliant. Its usage is similar to that of the date menu, and it also has a specific handler, as shown in the following code:

TB. add ({<br/> text: 'color', <br/> menu: New Ext. menu. colormenu ({<br/> handler: function (CM, color) {<br/> If (typeof color = 'string') {<br/> Ext. MSG. alert ('select color', 'selected color' is '+ color); <br/>}< br/>}) <br/> });

V. Summary

This chapter describes how to create a toolbar and menu, and how to use the drop-down menu and hierarchical menu to display the buttons in groups. In addition, we also analyze advanced menus. The usage of the paging control Ext. pagingtoolbar is described in the following sections.