Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / menus.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js">Ext.onReady(function(){
9     Ext.QuickTips.init();
10
11     // Menus can be prebuilt and passed by reference
12     var dateMenu = new Ext.menu.DateMenu({
13         handler: function(dp, date){
14             Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
15         }
16     });
17
18     var colorMenu = new Ext.menu.ColorMenu({
19         handler: function(cm, color){
20             Ext.example.msg('Color Selected', 'You chose {0}.', color);
21         }
22     });
23     
24     var store = new Ext.data.ArrayStore({
25         fields: ['abbr', 'state'],
26         data : Ext.exampledata.states // from states.js
27     });
28
29     var combo = new Ext.form.ComboBox({
30         store: store,
31         displayField: 'state',
32         typeAhead: true,
33         mode: 'local',
34         triggerAction: 'all',
35         emptyText: 'Select a state...',
36         selectOnFocus: true,
37         width: 135,
38         getListParent: function() {
39             return this.el.up('.x-menu');
40         },
41         iconCls: 'no-icon'
42     });
43
44     var menu = new Ext.menu.Menu({
45         id: 'mainMenu',
46         style: {
47             overflow: 'visible'     // For the Combo popup
48         },
49         items: [
50             combo,                  // A Field in a Menu
51             {
52                 text: 'I like Ext',
53                 checked: true,       // when checked has a boolean value, it is assumed to be a CheckItem
54                 checkHandler: onItemCheck
55             }, '-', {
56                 text: 'Radio Options',
57                 menu: {        // <-- submenu by nested config object
58                     items: [
59                         // stick any markup in a menu
60                         '<b class="menu-title">Choose a Theme</b>',
61                         {
62                             text: 'Aero Glass',
63                             checked: true,
64                             group: 'theme',
65                             checkHandler: onItemCheck
66                         }, {
67                             text: 'Vista Black',
68                             checked: false,
69                             group: 'theme',
70                             checkHandler: onItemCheck
71                         }, {
72                             text: 'Gray Theme',
73                             checked: false,
74                             group: 'theme',
75                             checkHandler: onItemCheck
76                         }, {
77                             text: 'Default Theme',
78                             checked: false,
79                             group: 'theme',
80                             checkHandler: onItemCheck
81                         }
82                     ]
83                 }
84             },{
85                 text: 'Choose a Date',
86                 iconCls: 'calendar',
87                 menu: dateMenu // <-- submenu by reference
88             },{
89                 text: 'Choose a Color',
90                 menu: colorMenu // <-- submenu by reference
91             }
92         ]
93     });
94
95     var tb = new Ext.Toolbar();
96     tb.render('toolbar');
97
98     tb.add({
99             text:'Button w/ Menu',
100             iconCls: 'bmenu',  // <-- icon
101             menu: menu  // assign menu by instance
102         }, 
103         new Ext.Toolbar.SplitButton({
104             text: 'Split Button',
105             handler: onButtonClick,
106             tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
107             iconCls: 'blist',
108             // Menus can be built/referenced by using nested menu config objects
109             menu : {
110                 items: [{
111                     text: '<b>Bold</b>', handler: onItemClick
112                 }, {
113                     text: '<i>Italic</i>', handler: onItemClick
114                 }, {
115                     text: '<u>Underline</u>', handler: onItemClick
116                 }, '-', {
117                     text: 'Pick a Color',
118                     handler: onItemClick,
119                     menu: {
120                         items: [
121                             new Ext.ColorPalette({
122                                 listeners: {
123                                     select: function(cp, color){
124                                         Ext.example.msg('Color Selected', 'You chose {0}.', color);
125                                     }
126                                 }
127                             }), '-',
128                             {
129                                 text: 'More Colors...',
130                                 handler: onItemClick
131                             }
132                         ]
133                     }
134                 }, {
135                     text: 'Extellent!',
136                     handler: onItemClick
137                 }]
138             }
139         }), '-', {
140         text: 'Toggle Me',
141         enableToggle: true,
142         toggleHandler: onItemToggle,
143         pressed: true
144     });
145
146     menu.addSeparator();
147     // Menus have a rich api for
148     // adding and removing elements dynamically
149     var item = menu.add({
150         text: 'Dynamically added Item'
151     });
152     // items support full Observable API
153     item.on('click', onItemClick);
154
155     // items can easily be looked up
156     menu.add({
157         text: 'Disabled Item',
158         id: 'disableMe'  // <-- Items can also have an id for easy lookup
159         // disabled: true   <-- allowed but for sake of example we use long way below
160     });
161     // access items by id or index
162     menu.items.get('disableMe').disable();
163
164     // They can also be referenced by id in or components
165     tb.add('-', {
166         icon: 'list-items.gif', // icons can also be specified inline
167         cls: 'x-btn-icon',
168         tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
169     }, '-');
170     
171     var scrollMenu = new Ext.menu.Menu();
172     for (var i = 0; i < 50; ++i){
173         scrollMenu.add({
174             text: 'Item ' + (i + 1)
175         });
176     }
177     // scrollable menu
178     tb.add({
179         icon: 'preview.png',
180         cls: 'x-btn-text-icon',
181         text: 'Scrolling Menu',
182         menu: scrollMenu
183     });
184
185     // add a combobox to the toolbar
186     var combo = new Ext.form.ComboBox({
187         store: store,
188         displayField: 'state',
189         typeAhead: true,
190         mode: 'local',
191         triggerAction: 'all',
192         emptyText:'Select a state...',
193         selectOnFocus:true,
194         width:135
195     });
196     tb.addField(combo);
197
198     tb.doLayout();
199
200     // functions to display feedback
201     function onButtonClick(btn){
202         Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
203     }
204
205     function onItemClick(item){
206         Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
207     }
208
209     function onItemCheck(item, checked){
210         Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
211     }
212
213     function onItemToggle(item, pressed){
214         Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
215     }
216
217 });</pre>    \r
218 </body>\r
219 </html>