Commonly used menu items

To show you the different items that can be used in a menu, we will build a menu that contains radio items, a checkbox menu, a date menu, and a color menu.

This is how the radio options and checkbox menu will look:

The Pick a Date menu item will display a date picker, as shown in the next screenshot:

The Pick a Color menu item displays a color picker, as seen here:

How to do it...

1. 1. Create a handler for the checkbox menu:

   Ext.onReady(function() {
   Ext.QuickTips.init();
   var onCheckHandler = function(item, checked) {
   Ext.Msg.alert('Menu checked', item.text + ', checked: ' + (checked ? 'checked' : 'unchecked'));
   };
   

2. 2. Define a date menu:

   var dateMenu = new Ext.menu.DateMenu({
   handler: function(dp, date) {
   Ext.Msg.alert('Date picker', date);
   }
   });
   

3. 3. Define a color menu:

   var colorMenu = new Ext.menu.ColorMenu({
   handler: function(cm, color) {
   Ext.Msg.alert('Color picker', String.format('You picked {0}.', color));
   }
   });
   

4. 4. Create a main menu. Now add the date and color...