examples/menu/menus.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8     Ext.QuickTips.init();
   9
  10     // Menus can be prebuilt and passed by reference
  11     var dateMenu = new Ext.menu.DateMenu({
  12         handler: function(dp, date){
  13             Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
  14         }
  15     });
  16
  17     var colorMenu = new Ext.menu.ColorMenu({
  18         handler: function(cm, color){
  19             Ext.example.msg('Color Selected', 'You chose {0}.', color);
  20         }
  21     });
  22
  23     var store = new Ext.data.ArrayStore({
  24         fields: ['abbr', 'state'],
  25         data : Ext.exampledata.states // from states.js
  26     });
  27
  28     var combo = new Ext.form.ComboBox({
  29         store: store,
  30         displayField: 'state',
  31         typeAhead: true,
  32         mode: 'local',
  33         triggerAction: 'all',
  34         emptyText: 'Select a state...',
  35         selectOnFocus: true,
  36         width: 135,
  37         getListParent: function() {
  38             return this.el.up('.x-menu');
  39         },
  40         iconCls: 'no-icon'
  41     });
  42
  43     var menu = new Ext.menu.Menu({
  44         id: 'mainMenu',
  45         style: {
  46             overflow: 'visible'     // For the Combo popup
  47         },
  48         items: [
  49             combo,                  // A Field in a Menu
  50             {
  51                 text: 'I like Ext',
  52                 checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
  53                 checkHandler: onItemCheck
  54             }, '-', {
  55                 text: 'Radio Options',
  56                 menu: {        // <-- submenu by nested config object
  57                     items: [
  58                         // stick any markup in a menu
  59                         '<b class="menu-title">Choose a Theme</b>',
  60                         {
  61                             text: 'Aero Glass',
  62                             checked: true,
  63                             group: 'theme',
  64                             checkHandler: onItemCheck
  65                         }, {
  66                             text: 'Vista Black',
  67                             checked: false,
  68                             group: 'theme',
  69                             checkHandler: onItemCheck
  70                         }, {
  71                             text: 'Gray Theme',
  72                             checked: false,
  73                             group: 'theme',
  74                             checkHandler: onItemCheck
  75                         }, {
  76                             text: 'Default Theme',
  77                             checked: false,
  78                             group: 'theme',
  79                             checkHandler: onItemCheck
  80                         }
  81                     ]
  82                 }
  83             },{
  84                 text: 'Choose a Date',
  85                 iconCls: 'calendar',
  86                 menu: dateMenu // <-- submenu by reference
  87             },{
  88                 text: 'Choose a Color',
  89                 menu: colorMenu // <-- submenu by reference
  90             }
  91         ]
  92     });
  93
  94     var tb = new Ext.Toolbar();
  95     tb.render('toolbar');
  96
  97     tb.add({
  98             text:'Button w/ Menu',
  99             iconCls: 'bmenu',  // <-- icon
 100             menu: menu  // assign menu by instance
 101         },
 102         new Ext.Toolbar.SplitButton({
 103             text: 'Split Button',
 104             handler: onButtonClick,
 105             tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
 106             iconCls: 'blist',
 107             // Menus can be built/referenced by using nested menu config objects
 108             menu : {
 109                 items: [{
 110                     text: '<b>Bold</b>', handler: onItemClick
 111                 }, {
 112                     text: '<i>Italic</i>', handler: onItemClick
 113                 }, {
 114                     text: '<u>Underline</u>', handler: onItemClick
 115                 }, '-', {
 116                     text: 'Pick a Color',
 117                     handler: onItemClick,
 118                     menu: {
 119                         items: [
 120                             new Ext.ColorPalette({
 121                                 listeners: {
 122                                     select: function(cp, color){
 123                                         Ext.example.msg('Color Selected', 'You chose {0}.', color);
 124                                     }
 125                                 }
 126                             }), '-',
 127                             {
 128                                 text: 'More Colors...',
 129                                 handler: onItemClick
 130                             }
 131                         ]
 132                     }
 133                 }, {
 134                     text: 'Extellent!',
 135                     handler: onItemClick
 136                 }]
 137             }
 138         }), '-', {
 139         text: 'Toggle Me',
 140         enableToggle: true,
 141         toggleHandler: onItemToggle,
 142         pressed: true
 143     });
 144
 145     menu.addSeparator();
 146     // Menus have a rich api for
 147     // adding and removing elements dynamically
 148     var item = menu.add({
 149         text: 'Dynamically added Item'
 150     });
 151     // items support full Observable API
 152     item.on('click', onItemClick);
 153
 154     // items can easily be looked up
 155     menu.add({
 156         text: 'Disabled Item',
 157         id: 'disableMe'  // <-- Items can also have an id for easy lookup
 158         // disabled: true   <-- allowed but for sake of example we use long way below
 159     });
 160     // access items by id or index
 161     menu.items.get('disableMe').disable();
 162
 163     // They can also be referenced by id in or components
 164     tb.add('-', {
 165         icon: 'list-items.gif', // icons can also be specified inline
 166         cls: 'x-btn-icon',
 167         tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
 168     }, '-');
 169
 170     var scrollMenu = new Ext.menu.Menu();
 171     for (var i = 0; i < 50; ++i){
 172         scrollMenu.add({
 173             text: 'Item ' + (i + 1)
 174         });
 175     }
 176     // scrollable menu
 177     tb.add({
 178         icon: 'preview.png',
 179         cls: 'x-btn-text-icon',
 180         text: 'Scrolling Menu',
 181         menu: scrollMenu
 182     });
 183
 184     // add a combobox to the toolbar
 185     var combo = new Ext.form.ComboBox({
 186         store: store,
 187         displayField: 'state',
 188         typeAhead: true,
 189         mode: 'local',
 190         triggerAction: 'all',
 191         emptyText:'Select a state...',
 192         selectOnFocus:true,
 193         width:135
 194     });
 195     tb.addField(combo);
 196
 197     tb.doLayout();
 198
 199     // functions to display feedback
 200     function onButtonClick(btn){
 201         Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
 202     }
 203
 204     function onItemClick(item){
 205         Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
 206     }
 207
 208     function onItemCheck(item, checked){
 209         Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
 210     }
 211
 212     function onItemToggle(item, pressed){
 213         Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
 214     }
 215
 216 });