examples/menu/menus.js

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