EXT introduction menu widget (EXT menu component)

Start!

The first step is to download the example ZIP file in this tutorial. the ZIP file contains three files:Extmenu.html,,Extmenu. js,Extmenu.css,AndList-items.gif. Decompress these four files to the ext installation directory (for example, ext is in "C: \ code \ ext \ V1.0, create the "menututorial" directory in "V1.0 ". Double-clickExtmenu.htmAnd then open the startup page in your browser. There should be a message telling you that the configuration is complete. If a javascript error occurs, follow the instructions on the page.

In your commonly used ide or text editor, open extmenu. js to see:

Ext.onReady(function() {
alert('You have Ext configured correctly! We are now ready to do some Ext Menu Magic!'); 
});

In ext introduction, we have discussed the reason for using ext and the functions of Ext. onready () function.

Create simple menu

First, let's look at how to make a basic menu, and then discuss the components and knowledge points in the code. Add the following code to the onready function:

VaRMenu =NewExt. Menu. menu ({
ID: 'basicmenu ',
Items :[{
Text: 'an item ',
Handler: clickhandler
},
NewExt. menu.Item({
Text: 'Another item ',
Handler: clickhandler
}),
'-',
NewExt. Menu. checkitem ({
Text: 'A check item ',
Checkhandler: checkhandler
}),
NewExt. Menu. checkitem ({
Text: 'Another check item ',
Checkhandler: checkhandler
})
]
});
 
VaRTB =NewExt. toolbar ('toolbar ',[{
Text: 'ur first menu ',
Menu: menu // assign menu to button
}
]);
 
FunctionClickhandler (){
Alert ('clicked on a menu item ');
}
 
FunctionCheckhandler (){
Alert ('checked a menu item ');
}

OK. Take a closer look at the code here. First, instantiate a menu class as the variable "menu ". Then the menu building function accepts a string of object literal as the parameter. In the previous ext tutorial, we have already discussed objectliteral. The current objectliteral contains the attributes we want in the menu. The first attribute is the assigned ID. Later we can use the ID to obtain the menu reference.

 

Types of various items

The attribute "items" may be one of the most important attributes. Note that the syntax is actually to upload an array as a value to the attribute. The data in the array is what we want to appear in the menu. In this example, we put six menu items, but why are the syntaxes of each item different? The first item is a string of object literal, which contains a set of configurable names/values. The underlying library of ext creates the item object for this string of object literal according to its configuration by default. The second item is the item object, followed by the separator, and the last two items are single items. The entire process demonstrates how to run ext widgets dynamically. The following items can be filled in the array:

{Text: 'foo'} // ext converts the configuration object to the menu item
'Straight text' // text or original HTML (plain text)
'-' // Create a separator
NewExt. menu.Item({Text: 'foo'}) // create a standard item (same as {text: 'foo '})
NewExt. Menu. checkitem () // create a ticket item
NewExt. Menu. dateitem () // create the built-in calendar control of menu
NewExt. Menu. coloritem () // create a color collector
NewExt. Menu. baseitem (document. getelementbyid ('My-Div ') // you can add any element.

Item attribute

What types of properties does item accept? In this example, we use these two attributes:

text: 'An item',
handler: clickHandler

The first is the item text. The second is the event handler function triggered when you click an item ). In this example, we define the functions clickhandler () and checkhandler () at the end of the Code. For demonstration purposes, alert () is only used to notify you of a click message.
Other useful attributes are:

CLS: 'A-class-name', // manually set the style and icon for the standard item
Icon: 'url', // if you do not want to use CSS, you can directly set the icon URL.
GROUP: 'name of group', // only applies to multiple options. Ensure that only one option is selected.

The complete item attribute list is in the <a href = "#"> menu item Document </a>.

Place menus in the UI

So, the created menu object already has two basic items. But how can we place them in the page? In the UI, a menu can be allocated to multiple locations (the same object and multiple times in different locations). This is why ext is so powerful: Every device (widget) it is partitioned into a class of "one piece and one fast" to build the entire object-oriented dynamic structure (structure ). This means that the menu can be used in different scenarios. We can place the menu in a toolbar with buttons, or use a button on the page to expand the menu, or even in other ext devices (widgets) use menu as the context menu ).

In this example, assign a menu to the toolbar:

VaRTB =NewExt. toolbar ('toolbar ',[{
Text: 'ur first menu ',
Menu: menu // assign menu to Toolbar
}
]);

The Ext. toolbar build function accepts two parameters. The first parameter is the container that specifies the toolbar (contrainer), and the second parameter is an array that contains all buttons. Here, we only use one button. As we can see, the button is essentially a string of object literal composed of arrays, and the object litetal also contains different attributes. The following is the object litetal attribute of a group of Button objects:

CLS: 'A-class-name', // manually set the style and icon
Icon: 'url', // if you do not want to use CSS, you can directly set the icon URL.
Text: 'ur first menu ', // text prompted by the button
Menu: menu // It can be the menu ID or configuration object

Menu allocation method:

I just talked about how to assign a menu to the toolbar, and then discussed the different methods of menu assignment to see the details. So, because the menu attribute can be allocated in different ways, that is, a menu object, a created menuid, or a menu config object can be assigned. You should have the opportunity to try to create a menu in multiple ways, because similar methods are everywhere in ext widgets. The following code demonstrates how to use different methods to achieve the same effect as the example. The only difference is the config of the menu object. The menu includes two sub-menus, one dataitem container, and one coloritem container. Note that the Event Handing function requires two parameters to obtain more information about the event and to know which item is clicked. If you can, add the following code to the onready function and try it out:

var dateMenu = new Ext.menu.DateMenu({
    handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
 
var colorMenu = new Ext.menu.Menu({
    id: 'colorMenu', // the menu's id we use later to assign as submenu
    items: [
new Ext.menu.ColorItem({
            selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
 
var tb = new Ext.Toolbar('toolbar', [{
        text:'Our first Menu',
        menu: {
            id: 'basicMenu',
            items: [{
                    text: 'An item',
                    handler: clickHandler
}, {
                    text: 'Another item',
                    handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
                    text: 'A check item',
                    checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
                    text: 'Another check item',
                    checkHandler: checkHandler
}),
'-', {
                    text: 'DateMenu as submenu',
                    menu: dateMenu, // assign the dateMenu we created above by variable reference,
                    handler: date
}, {
                    text: 'Submenu with ColorItem',
                    menu: 'colorMenu'    // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
 
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
 
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}

Note:Pay attention to several different ways to add sub-Menus! There is also the difference between the even handing function and the coloritem and datamenu anonymous functions.

Practice

OK. We used the above method to create the toolbar and menu. It looks like this:

The menu mentioned above can be placed anywhere in the UI. Here we will show you how the menu works with toolbars, meneubuttons, and context menus's, including some useful methods and dynamic addition functions.

Menubutton

new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});

Dynamically add menu buttons to Toolbar

This toolbar has two buttons. A separator and a pure icon button (with quicktips ). You can try to add .gif In the ZIP file.

Ext. quicktips. INIT ();
 
TB. Add ('-',{
Icon: 'list-items.gif ', // The icon can be displayed in a single row.
CLS: 'x-BTN-Icon ', // pure icon
Tooltip: '<strong> quick tips </strong> <br/> prompt text'
});

What's more convenient is

Some code snippets help you improve efficiency and pay attention to comments!

// Menus more API content
// Dynamically add or subtract Elements
 
Menu. addseparator (); // dynamically add Separators
 
VaR Item= Menu. Add ({
Text: 'dynamically added item'
});
 
// Items fully supports the observable API
Item. On ('click', onitemclick );
 
// Items can easily be looked up
Menu. Add ({
Text: 'Disabled item ',
ID: 'disableme' // & lt; -- set the ID to facilitate Lookup
// Disabled: True & lt; -- disable disabled first and use the following method
});
 
// Access with ID or index
Menu. Items. Get ('disableme'). Disable ();

The next step is

Now you know how menu components work. The following resources help you learn more about the menu:

• EXT programmer's API documentation
• EXT user forums