examples/menu/menus.js

   1 Ext.require(['*']);
   2
   3 // TODO: The "Users" menu containing buttons is completely screwed: ButtonGroup needs work.
   4
   5 Ext.onReady(function(){
   6     Ext.QuickTips.init();
   7
   8     var dateMenu = Ext.create('Ext.menu.DatePicker', {
   9         handler: function(dp, date){
  10             Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));
  11
  12         }
  13     });
  14
  15     var colorMenu = Ext.create('Ext.menu.ColorPicker', {
  16         handler: function(cm, color){
  17             Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
  18         }
  19     });
  20
  21     var store = Ext.create('Ext.data.ArrayStore', {
  22         fields: ['abbr', 'state'],
  23         data : Ext.example.states
  24     });
  25
  26     var combo = Ext.create('Ext.form.field.ComboBox', {
  27         hideLabel: true,
  28         store: store,
  29         displayField: 'state',
  30         typeAhead: true,
  31         queryMode: 'local',
  32         triggerAction: 'all',
  33         emptyText: 'Select a state...',
  34         selectOnFocus: true,
  35         width: 135,
  36         iconCls: 'no-icon'
  37     });
  38
  39     var menu = Ext.create('Ext.menu.Menu', {
  40         id: 'mainMenu',
  41         style: {
  42             overflow: 'visible'     // For the Combo popup
  43         },
  44         items: [
  45             combo,                  // A Field in a Menu
  46             {
  47                 text: 'I like Ext',
  48                 checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
  49                 checkHandler: onItemCheck
  50             }, '-', {
  51                 text: 'Radio Options',
  52                 menu: {        // <-- submenu by nested config object
  53                     items: [
  54                         // stick any markup in a menu
  55                         '<b class="menu-title">Choose a Theme</b>',
  56                         {
  57                             text: 'Aero Glass',
  58                             checked: true,
  59                             group: 'theme',
  60                             checkHandler: onItemCheck
  61                         }, {
  62                             text: 'Vista Black',
  63                             checked: false,
  64                             group: 'theme',
  65                             checkHandler: onItemCheck
  66                         }, {
  67                             text: 'Gray Theme',
  68                             checked: false,
  69                             group: 'theme',
  70                             checkHandler: onItemCheck
  71                         }, {
  72                             text: 'Default Theme',
  73                             checked: false,
  74                             group: 'theme',
  75                             checkHandler: onItemCheck
  76                         }
  77                     ]
  78                 }
  79            },{
  80                text: 'Choose a Date',
  81                iconCls: 'calendar',
  82                menu: dateMenu // <-- submenu by reference
  83            },{
  84                text: 'Choose a Color',
  85                menu: colorMenu // <-- submenu by reference
  86            }
  87         ]
  88     });
  89
  90     var tb = Ext.create('Ext.toolbar.Toolbar');
  91     tb.suspendLayout = true;
  92     tb.render('toolbar');
  93
  94     tb.add({
  95             text:'Button w/ Menu',
  96             iconCls: 'bmenu',  // <-- icon
  97             menu: menu  // assign menu by instance
  98         }, {
  99             text: 'Users',
 100             iconCls: 'user',
 101             menu: {
 102                 xtype: 'menu',
 103                 plain: true,
 104                 items: {
 105                     xtype: 'buttongroup',
 106                     title: 'User options',
 107                     columns: 2,
 108                     defaults: {
 109                         xtype: 'button',
 110                         scale: 'large',
 111                         iconAlign: 'left'
 112                     },
 113                     items: [{
 114                         text: 'User<br/>manager',
 115                         iconCls: 'edit',
 116                         width: 90
 117                     },{
 118                         iconCls: 'add',
 119                         width: 'auto',
 120                         tooltip: 'Add user',
 121                         width: 40
 122                     },{
 123                         colspan: 2,
 124                         text: 'Import',
 125                         scale: 'small',
 126                         width: 130
 127                     },{
 128                         colspan: 2,
 129                         text: 'Who is online?',
 130                         scale: 'small',
 131                         width: 130
 132                     }]
 133                 }
 134             }
 135         },
 136         Ext.create('Ext.button.Split', {
 137             text: 'Split Button',
 138             handler: onButtonClick,
 139             tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
 140             iconCls: 'blist',
 141             // Menus can be built/referenced by using nested menu config objects
 142             menu : {
 143                 items: [{
 144                     text: '<b>Bold</b>', handler: onItemClick
 145                 }, {
 146                     text: '<i>Italic</i>', handler: onItemClick
 147                 }, {
 148                     text: '<u>Underline</u>', handler: onItemClick
 149                 }, '-', {
 150                     text: 'Pick a Color',
 151                     handler: onItemClick,
 152                     menu: {
 153                         showSeparator: false,
 154                         items: [
 155                             Ext.create('Ext.ColorPalette', {
 156                                 listeners: {
 157                                     select: function(cp, color){
 158                                         Ext.example.msg('Color Selected', 'You chose {0}.', color);
 159                                     }
 160                                 }
 161                             }), '-',
 162                             {
 163                                 text: 'More Colors...',
 164                                 handler: onItemClick
 165                             }
 166                         ]
 167                     }
 168                 }, {
 169                     text: 'Extellent!',
 170                     handler: onItemClick
 171                 }]
 172             }
 173         }), '-', {
 174         text: 'Toggle Me',
 175         enableToggle: true,
 176         toggleHandler: onItemToggle,
 177         pressed: true
 178     });
 179
 180     menu.add(' ');
 181
 182     // Menus have a rich api for
 183     // adding and removing elements dynamically
 184     var item = menu.add({
 185         text: 'Dynamically added Item'
 186     });
 187     // items support full Observable API
 188     item.on('click', onItemClick);
 189
 190     // items can easily be looked up
 191     menu.add({
 192         text: 'Disabled Item',
 193         id: 'disableMe'  // <-- Items can also have an id for easy lookup
 194         // disabled: true   <-- allowed but for sake of example we use long way below
 195     });
 196     // access items by id or index
 197     menu.items.get('disableMe').disable();
 198
 199     // They can also be referenced by id in or components
 200     tb.add('-', {
 201         icon: 'list-items.gif', // icons can also be specified inline
 202         cls: 'x-btn-icon',
 203         tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip',
 204         handler: function(){
 205             Ext.example.msg('Button Click','You clicked the "icon only" button.');
 206         }
 207     }, '-');
 208
 209     var scrollMenu = Ext.create('Ext.menu.Menu');
 210     for (var i = 0; i < 50; ++i){
 211         scrollMenu.add({
 212             text: 'Item ' + (i + 1),
 213             handler: onItemClick
 214         });
 215     }
 216     // scrollable menu
 217     tb.add({
 218         icon: 'preview.png',
 219         cls: 'x-btn-text-icon',
 220         text: 'Scrolling Menu',
 221         menu: scrollMenu
 222     });
 223
 224     tb.add({
 225         text: 'Link',
 226         url: 'http://www.google.com/search',
 227         baseParams: {
 228             q: 'html+anchor+tag'
 229         },
 230         tooltip: 'This is a link. You can right click. You can see where it will take you'
 231     });
 232
 233     // add a combobox to the toolbar
 234     var combo = Ext.create('Ext.form.field.ComboBox', {
 235         hideLabel: true,
 236         store: store,
 237         displayField: 'state',
 238         typeAhead: true,
 239         mode: 'local',
 240         triggerAction: 'all',
 241         emptyText:'Select a state...',
 242         selectOnFocus:true,
 243         width:135
 244     });
 245     tb.add(combo);
 246     tb.suspendLayout = false;
 247     tb.doLayout();
 248
 249     // functions to display feedback
 250     function onButtonClick(btn){
 251         Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
 252     }
 253
 254     function onItemClick(item){
 255         Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
 256     }
 257
 258     function onItemCheck(item, checked){
 259         Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
 260     }
 261
 262     function onItemToggle(item, pressed){
 263         Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
 264     }
 265
 266 });