examples/menu/menus.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   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             text: 'Users',
 103             iconCls: 'user',
 104             menu: {
 105                 xtype: 'menu',
 106                 plain: true,
 107                 items: {
 108                     xtype: 'buttongroup',
 109                     title: 'User options',
 110                     autoWidth: true,
 111                     columns: 2,
 112                     defaults: {
 113                         xtype: 'button',
 114                         scale: 'large',
 115                         width: '100%',
 116                         iconAlign: 'left'
 117                     },
 118                     items: [{
 119                         text: 'User<br/>manager',
 120                         iconCls: 'edit'
 121                     },{
 122                         iconCls: 'add',
 123                         width: 'auto',
 124                         tooltip: 'Add user'
 125                     },{
 126                         colspan: 2,
 127                         text: 'Import',
 128                         scale: 'small'
 129                     },{
 130                         colspan: 2,
 131                         text: 'Who is online?',
 132                         scale: 'small'
 133                     }]
 134                 }
 135             }
 136         },
 137         new Ext.Toolbar.SplitButton({
 138             text: 'Split Button',
 139             handler: onButtonClick,
 140             tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
 141             iconCls: 'blist',
 142             // Menus can be built/referenced by using nested menu config objects
 143             menu : {
 144                 items: [{
 145                     text: '<b>Bold</b>', handler: onItemClick
 146                 }, {
 147                     text: '<i>Italic</i>', handler: onItemClick
 148                 }, {
 149                     text: '<u>Underline</u>', handler: onItemClick
 150                 }, '-', {
 151                     text: 'Pick a Color',
 152                     handler: onItemClick,
 153                     menu: {
 154                         items: [
 155                             new 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.addSeparator();
 181     // Menus have a rich api for
 182     // adding and removing elements dynamically
 183     var item = menu.add({
 184         text: 'Dynamically added Item'
 185     });
 186     // items support full Observable API
 187     item.on('click', onItemClick);
 188
 189     // items can easily be looked up
 190     menu.add({
 191         text: 'Disabled Item',
 192         id: 'disableMe'  // <-- Items can also have an id for easy lookup
 193         // disabled: true   <-- allowed but for sake of example we use long way below
 194     });
 195     // access items by id or index
 196     menu.items.get('disableMe').disable();
 197
 198     // They can also be referenced by id in or components
 199     tb.add('-', {
 200         icon: 'list-items.gif', // icons can also be specified inline
 201         cls: 'x-btn-icon',
 202         tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
 203     }, '-');
 204
 205     var scrollMenu = new Ext.menu.Menu();
 206     for (var i = 0; i < 50; ++i){
 207         scrollMenu.add({
 208             text: 'Item ' + (i + 1)
 209         });
 210     }
 211     // scrollable menu
 212     tb.add({
 213         icon: 'preview.png',
 214         cls: 'x-btn-text-icon',
 215         text: 'Scrolling Menu',
 216         menu: scrollMenu
 217     });
 218
 219     // add a combobox to the toolbar
 220     var combo = new Ext.form.ComboBox({
 221         store: store,
 222         displayField: 'state',
 223         typeAhead: true,
 224         mode: 'local',
 225         triggerAction: 'all',
 226         emptyText:'Select a state...',
 227         selectOnFocus:true,
 228         width:135
 229     });
 230     tb.addField(combo);
 231
 232     tb.doLayout();
 233
 234     // functions to display feedback
 235     function onButtonClick(btn){
 236         Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
 237     }
 238
 239     function onItemClick(item){
 240         Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
 241     }
 242
 243     function onItemCheck(item, checked){
 244         Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
 245     }
 246
 247     function onItemToggle(item, pressed){
 248         Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
 249     }
 250
 251 });