JavaScript DHTML/Ext JS/DateMenu
DateMenu and its handler
<source lang="html4strict">
<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> <style type="text/css"> .icon-accept {
background-image: url(accept.png) !important;
} </style> </head> <script type="text/javascript"> Ext.onReady(function() {
var colorAndDateHandler = function(menuItem, choice) { Ext.MessageBox.alert("", "Your choice is " + choice); } var dateMenu = { text : "Choose Date", menu : { xtype : "datemenu", handler : colorAndDateHandler } }; var menu = new Ext.menu.Menu({ id : "myMenu", items : dateMenu, listeners : { "beforehide" : function() { return false; } } }); menu.showAt([100,100]);
});
</script> <body>
</body> </html>
</source>
<source lang="html4strict">
<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>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/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.ruboBox({ 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 "Choose a Theme", { 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: "Bold", handler: onItemClick }, { text: "Italic", handler: onItemClick }, { text: "Underline", 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: "Quick Tips
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.ruboBox({ 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>
</body>
</html>
</source>