git.roojs.org Git - roojs1/blob - examples/menu/menus.js

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