Use Ext.menu.DateMenu
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/form/states.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); // Menus can be prebuilt and passed by reference var dateMenu = new Ext.menu.DateMenu({ handler: function(dp, date){ Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y')); } }); var colorMenu = new Ext.menu.ColorMenu({ handler: function(cm, color){ Ext.example.msg('Color Selected', 'You chose {0}.', color); } }); var store = new Ext.data.ArrayStore({ fields: ['abbr', 'state'], data : Ext.exampledata.states // from states.js }); var combo = new Ext.form.ComboBox({ store: store, displayField: 'state', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText: 'Select a state...', selectOnFocus: true, width: 135, getListParent: function() { return this.el.up('.x-menu'); }, iconCls: 'no-icon' }); var menu = new Ext.menu.Menu({ id: 'mainMenu', style: { overflow: 'visible' // For the Combo popup }, items: [ combo, // A Field in a Menu { text: 'I like Ext', checked: true, // when checked has a boolean value, it is assumed to be a CheckItem checkHandler: onItemCheck }, '-', { text: 'Radio Options', menu: { // <-- submenu by nested config object items: [ // stick any markup in a menu '<b class="menu-title">Choose a Theme</b>', { text: 'Aero Glass', checked: true, group: 'theme', checkHandler: onItemCheck }, { text: 'Vista Black', checked: false, group: 'theme', checkHandler: onItemCheck }, { text: 'Gray Theme', checked: false, group: 'theme', checkHandler: onItemCheck }, { text: 'Default Theme', checked: false, group: 'theme', checkHandler: onItemCheck } ] } },{ text: 'Choose a Date', iconCls: 'calendar', menu: dateMenu // <-- submenu by reference },{ text: 'Choose a Color', menu: colorMenu // <-- submenu by reference } ] }); var tb = new Ext.Toolbar(); tb.render('toolbar'); tb.add({ text:'Button w/ Menu', iconCls: 'bmenu', // <-- icon menu: menu // assign menu by instance }, new Ext.Toolbar.SplitButton({ text: 'Split Button', handler: onButtonClick, tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'}, iconCls: 'blist', // Menus can be built/referenced by using nested menu config objects menu : { items: [{ text: '<b>Bold</b>', handler: onItemClick }, { text: '<i>Italic</i>', handler: onItemClick }, { text: '<u>Underline</u>', handler: onItemClick }, '-', { text: 'Pick a Color', handler: onItemClick, menu: { items: [ new Ext.ColorPalette({ listeners: { select: function(cp, color){ Ext.example.msg('Color Selected', 'You chose {0}.', color); } } }), '-', { text: 'More Colors...', handler: onItemClick } ] } }, { text: 'Extellent!', handler: onItemClick }] } }), '-', { text: 'Toggle Me', enableToggle: true, toggleHandler: onItemToggle, pressed: true }); menu.addSeparator(); // Menus have a rich api for // adding and removing elements dynamically var item = menu.add({ text: 'Dynamically added Item' }); // items support full Observable API item.on('click', onItemClick); // items can easily be looked up menu.add({ text: 'Disabled Item', id: 'disableMe' // <-- Items can also have an id for easy lookup // disabled: true <-- allowed but for sake of example we use long way below }); // access items by id or index menu.items.get('disableMe').disable(); // They can also be referenced by id in or components tb.add('-', { icon: 'list-items.gif', // icons can also be specified inline cls: 'x-btn-icon', tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip' }, '-'); var scrollMenu = new Ext.menu.Menu(); for (var i = 0; i < 50; ++i){ scrollMenu.add({ text: 'Item ' + (i + 1) }); } // scrollable menu tb.add({ icon: 'preview.png', cls: 'x-btn-text-icon', text: 'Scrolling Menu', menu: scrollMenu }); // add a combobox to the toolbar var combo = new Ext.form.ComboBox({ store: store, displayField: 'state', typeAhead: true, mode: 'local', triggerAction: 'all', emptyText:'Select a state...', selectOnFocus:true, width:135 }); tb.addField(combo); tb.doLayout(); // functions to display feedback function onButtonClick(btn){ Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text); } function onItemClick(item){ Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text); } function onItemCheck(item, checked){ Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked'); } function onItemToggle(item, pressed){ Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed); } }); </script> <div id="container"> <div id="toolbar"></div> </div> <br /><br /><br /><br /><br /> </body> </html>
1. | DateMenu and its handler |