4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
11 Roo.onReady(function(){
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'));
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);
28 var menu = new Roo.menu.Menu({
31 new Roo.menu.CheckItem({
34 checkHandler: onItemCheck
36 new Roo.menu.CheckItem({
37 text: 'Roo beats jQuery',
39 checkHandler: onItemCheck
41 new Roo.menu.CheckItem({
44 checkHandler: onItemCheck
46 text: 'Radio Options',
47 menu: { // <-- submenu by nested config object
49 // stick any markup in a menu
50 '<b class="menu-title">Choose a Theme</b>',
51 new Roo.menu.CheckItem({
55 checkHandler: onItemCheck
57 new Roo.menu.CheckItem({
60 checkHandler: onItemCheck
62 new Roo.menu.CheckItem({
65 checkHandler: onItemCheck
67 new Roo.menu.CheckItem({
68 text: 'Default Theme',
70 checkHandler: onItemCheck
75 text: 'Choose a Date',
77 menu: dateMenu // <-- submenu by reference
79 text: 'Choose a Color',
80 menu: colorMenu // <-- submenu by reference
85 var tb = new Roo.Toolbar('toolbar');
87 cls: 'x-btn-text-icon bmenu', // icon and text class
88 text:'Button w/ Menu',
89 menu: menu // assign menu by instance
91 new Roo.Toolbar.MenuButton({
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
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: {
103 new Roo.menu.ColorItem({selectHandler:function(cp, color){
104 Roo.example.msg('Color Selected', 'You chose {0}.', color);
106 {text:'More Colors...', handler:onItemClick}
109 {text: 'Extellent!', handler: onItemClick}
114 toggleHandler: onItemToggle,
119 // Menus have a rich api for
120 // adding and removing elements dynamically
121 var item = menu.add({
122 text: 'Dynamically added Item'
124 // items support full Observable API
125 item.on('click', onItemClick);
127 // items can easily be looked up
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
133 // access items by id or index
134 menu.items.get('disableMe').disable();
136 // They can also be referenced by id in or components
138 icon: 'list-items.gif', // icons can also be specified inline
140 tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
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
148 var combo = new Roo.form.ComboBox({
150 displayField:'state',
153 triggerAction: 'all',
154 emptyText:'Select a state...',
160 // functions to display feedback
161 function onButtonClick(btn){
162 Roo.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
165 function onItemClick(item){
166 Roo.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
169 function onItemCheck(item, checked){
170 Roo.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
173 function onItemToggle(item, pressed){
174 Roo.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);