2 * Ext JS Library 2.2.1
\r
3 * Copyright(c) 2006-2009, Ext JS, LLC.
\r
4 * licensing@extjs.com
\r
6 * http://extjs.com/license
\r
9 Ext.onReady(function(){
\r
10 Ext.QuickTips.init();
\r
12 // Menus can be prebuilt and passed by reference
\r
13 var dateMenu = new Ext.menu.DateMenu({
\r
14 handler : function(dp, date){
\r
15 Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
\r
19 var colorMenu = new Ext.menu.ColorMenu({
\r
20 handler : function(cm, color){
\r
21 Ext.example.msg('Color Selected', 'You chose {0}.', color);
\r
25 var menu = new Ext.menu.Menu({
\r
30 checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
\r
31 checkHandler: onItemCheck
\r
34 text: 'Ext for jQuery',
\r
36 checkHandler: onItemCheck
\r
41 checkHandler: onItemCheck
\r
43 text: 'Radio Options',
\r
44 menu: { // <-- submenu by nested config object
\r
46 // stick any markup in a menu
\r
47 '<b class="menu-title">Choose a Theme</b>',
\r
52 checkHandler: onItemCheck
\r
54 text: 'Vista Black',
\r
57 checkHandler: onItemCheck
\r
62 checkHandler: onItemCheck
\r
64 text: 'Default Theme',
\r
67 checkHandler: onItemCheck
\r
72 text: 'Choose a Date',
\r
73 iconCls: 'calendar',
\r
74 menu: dateMenu // <-- submenu by reference
\r
76 text: 'Choose a Color',
\r
77 menu: colorMenu // <-- submenu by reference
\r
82 var tb = new Ext.Toolbar();
\r
83 tb.render('toolbar');
\r
86 text:'Button w/ Menu',
\r
87 iconCls: 'bmenu', // <-- icon
\r
88 menu: menu // assign menu by instance
\r
90 new Ext.Toolbar.MenuButton({
\r
91 text: 'Split Button',
\r
92 handler: onButtonClick,
\r
93 tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
\r
95 // Menus can be built/referenced by using nested menu config objects
\r
97 {text: '<b>Bold</b>', handler: onItemClick},
\r
98 {text: '<i>Italic</i>', handler: onItemClick},
\r
99 {text: '<u>Underline</u>', handler: onItemClick}, '-',{
\r
100 text: 'Pick a Color', handler: onItemClick, menu: {
\r
102 new Ext.menu.ColorItem({selectHandler:function(cp, color){
\r
103 Ext.example.msg('Color Selected', 'You chose {0}.', color);
\r
105 {text:'More Colors...', handler:onItemClick}
\r
108 {text: 'Extellent!', handler: onItemClick}
\r
112 enableToggle: true,
\r
113 toggleHandler: onItemToggle,
\r
117 menu.addSeparator();
\r
118 // Menus have a rich api for
\r
119 // adding and removing elements dynamically
\r
120 var item = menu.add({
\r
121 text: 'Dynamically added Item'
\r
123 // items support full Observable API
\r
124 item.on('click', onItemClick);
\r
126 // items can easily be looked up
\r
128 text: 'Disabled Item',
\r
129 id: 'disableMe' // <-- Items can also have an id for easy lookup
\r
130 // disabled: true <-- allowed but for sake of example we use long way below
\r
132 // access items by id or index
\r
133 menu.items.get('disableMe').disable();
\r
135 // They can also be referenced by id in or components
\r
137 icon: 'list-items.gif', // icons can also be specified inline
\r
139 tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
\r
142 // add a combobox to the toolbar
\r
143 var store = new Ext.data.SimpleStore({
\r
144 fields: ['abbr', 'state'],
\r
145 data : Ext.exampledata.states // from states.js
\r
147 var combo = new Ext.form.ComboBox({
\r
149 displayField:'state',
\r
152 triggerAction: 'all',
\r
153 emptyText:'Select a state...',
\r
154 selectOnFocus:true,
\r
157 tb.addField(combo);
\r
159 // functions to display feedback
\r
160 function onButtonClick(btn){
\r
161 Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
\r
164 function onItemClick(item){
\r
165 Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
\r
168 function onItemCheck(item, checked){
\r
169 Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
\r
172 function onItemToggle(item, pressed){
\r
173 Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
\r