3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
7 Ext.onReady(function(){
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'));
17 var colorMenu = new Ext.menu.ColorMenu({
18 handler: function(cm, color){
19 Ext.example.msg('Color Selected', 'You chose {0}.', color);
23 var store = new Ext.data.ArrayStore({
24 fields: ['abbr', 'state'],
25 data : Ext.exampledata.states // from states.js
28 var combo = new Ext.form.ComboBox({
30 displayField: 'state',
34 emptyText: 'Select a state...',
37 getListParent: function() {
38 return this.el.up('.x-menu');
43 var menu = new Ext.menu.Menu({
46 overflow: 'visible' // For the Combo popup
49 combo, // A Field in a Menu
52 checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
53 checkHandler: onItemCheck
55 text: 'Radio Options',
56 menu: { // <-- submenu by nested config object
58 // stick any markup in a menu
59 '<b class="menu-title">Choose a Theme</b>',
64 checkHandler: onItemCheck
69 checkHandler: onItemCheck
74 checkHandler: onItemCheck
76 text: 'Default Theme',
79 checkHandler: onItemCheck
84 text: 'Choose a Date',
86 menu: dateMenu // <-- submenu by reference
88 text: 'Choose a Color',
89 menu: colorMenu // <-- submenu by reference
94 var tb = new Ext.Toolbar();
98 text:'Button w/ Menu',
99 iconCls: 'bmenu', // <-- icon
100 menu: menu // assign menu by instance
108 xtype: 'buttongroup',
109 title: 'User options',
119 text: 'User<br/>manager',
131 text: 'Who is online?',
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'},
142 // Menus can be built/referenced by using nested menu config objects
145 text: '<b>Bold</b>', handler: onItemClick
147 text: '<i>Italic</i>', handler: onItemClick
149 text: '<u>Underline</u>', handler: onItemClick
151 text: 'Pick a Color',
152 handler: onItemClick,
155 new Ext.ColorPalette({
157 select: function(cp, color){
158 Ext.example.msg('Color Selected', 'You chose {0}.', color);
163 text: 'More Colors...',
176 toggleHandler: onItemToggle,
181 // Menus have a rich api for
182 // adding and removing elements dynamically
183 var item = menu.add({
184 text: 'Dynamically added Item'
186 // items support full Observable API
187 item.on('click', onItemClick);
189 // items can easily be looked up
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
195 // access items by id or index
196 menu.items.get('disableMe').disable();
198 // They can also be referenced by id in or components
200 icon: 'list-items.gif', // icons can also be specified inline
202 tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
205 var scrollMenu = new Ext.menu.Menu();
206 for (var i = 0; i < 50; ++i){
208 text: 'Item ' + (i + 1)
214 cls: 'x-btn-text-icon',
215 text: 'Scrolling Menu',
219 // add a combobox to the toolbar
220 var combo = new Ext.form.ComboBox({
222 displayField: 'state',
225 triggerAction: 'all',
226 emptyText:'Select a state...',
234 // functions to display feedback
235 function onButtonClick(btn){
236 Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
239 function onItemClick(item){
240 Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
243 function onItemCheck(item, checked){
244 Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
247 function onItemToggle(item, pressed){
248 Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);