examples/menu/menus.js

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