1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.onReady(function(){ |
---|
10 | Ext.QuickTips.init(); |
---|
11 | |
---|
12 | // Menus can be prebuilt and passed by reference |
---|
13 | var dateMenu = new Ext.menu.DateMenu({ |
---|
14 | handler : function(dp, date){ |
---|
15 | Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y')); |
---|
16 | } |
---|
17 | }); |
---|
18 | |
---|
19 | var colorMenu = new Ext.menu.ColorMenu({ |
---|
20 | handler : function(cm, color){ |
---|
21 | Ext.example.msg('Color Selected', 'You chose {0}.', color); |
---|
22 | } |
---|
23 | }); |
---|
24 | |
---|
25 | var menu = new Ext.menu.Menu({ |
---|
26 | id: 'mainMenu', |
---|
27 | items: [ |
---|
28 | { |
---|
29 | text: 'I like Ext', |
---|
30 | checked: true, // when checked has a boolean value, it is assumed to be a CheckItem |
---|
31 | checkHandler: onItemCheck |
---|
32 | }, |
---|
33 | { |
---|
34 | text: 'Ext for jQuery', |
---|
35 | checked: true, |
---|
36 | checkHandler: onItemCheck |
---|
37 | }, |
---|
38 | { |
---|
39 | text: 'I donated!', |
---|
40 | checked:false, |
---|
41 | checkHandler: onItemCheck |
---|
42 | }, '-', { |
---|
43 | text: 'Radio Options', |
---|
44 | menu: { // <-- submenu by nested config object |
---|
45 | items: [ |
---|
46 | // stick any markup in a menu |
---|
47 | '<b class="menu-title">Choose a Theme</b>', |
---|
48 | { |
---|
49 | text: 'Aero Glass', |
---|
50 | checked: true, |
---|
51 | group: 'theme', |
---|
52 | checkHandler: onItemCheck |
---|
53 | }, { |
---|
54 | text: 'Vista Black', |
---|
55 | checked: false, |
---|
56 | group: 'theme', |
---|
57 | checkHandler: onItemCheck |
---|
58 | }, { |
---|
59 | text: 'Gray Theme', |
---|
60 | checked: false, |
---|
61 | group: 'theme', |
---|
62 | checkHandler: onItemCheck |
---|
63 | }, { |
---|
64 | text: 'Default Theme', |
---|
65 | checked: false, |
---|
66 | group: 'theme', |
---|
67 | checkHandler: onItemCheck |
---|
68 | } |
---|
69 | ] |
---|
70 | } |
---|
71 | },{ |
---|
72 | text: 'Choose a Date', |
---|
73 | iconCls: 'calendar', |
---|
74 | menu: dateMenu // <-- submenu by reference |
---|
75 | },{ |
---|
76 | text: 'Choose a Color', |
---|
77 | menu: colorMenu // <-- submenu by reference |
---|
78 | } |
---|
79 | ] |
---|
80 | }); |
---|
81 | |
---|
82 | var tb = new Ext.Toolbar(); |
---|
83 | tb.render('toolbar'); |
---|
84 | |
---|
85 | tb.add({ |
---|
86 | text:'Button w/ Menu', |
---|
87 | iconCls: 'bmenu', // <-- icon |
---|
88 | menu: menu // assign menu by instance |
---|
89 | }, |
---|
90 | new Ext.Toolbar.MenuButton({ |
---|
91 | text: 'Split Button', |
---|
92 | handler: onButtonClick, |
---|
93 | tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'}, |
---|
94 | iconCls: 'blist', |
---|
95 | // Menus can be built/referenced by using nested menu config objects |
---|
96 | menu : {items: [ |
---|
97 | {text: '<b>Bold</b>', handler: onItemClick}, |
---|
98 | {text: '<i>Italic</i>', handler: onItemClick}, |
---|
99 | {text: '<u>Underline</u>', handler: onItemClick}, '-',{ |
---|
100 | text: 'Pick a Color', handler: onItemClick, menu: { |
---|
101 | items: [ |
---|
102 | new Ext.menu.ColorItem({selectHandler:function(cp, color){ |
---|
103 | Ext.example.msg('Color Selected', 'You chose {0}.', color); |
---|
104 | }}), '-', |
---|
105 | {text:'More Colors...', handler:onItemClick} |
---|
106 | ] |
---|
107 | }}, |
---|
108 | {text: 'Extellent!', handler: onItemClick} |
---|
109 | ]} |
---|
110 | }), '-', { |
---|
111 | text: 'Toggle Me', |
---|
112 | enableToggle: true, |
---|
113 | toggleHandler: onItemToggle, |
---|
114 | pressed: true |
---|
115 | }); |
---|
116 | |
---|
117 | menu.addSeparator(); |
---|
118 | // Menus have a rich api for |
---|
119 | // adding and removing elements dynamically |
---|
120 | var item = menu.add({ |
---|
121 | text: 'Dynamically added Item' |
---|
122 | }); |
---|
123 | // items support full Observable API |
---|
124 | item.on('click', onItemClick); |
---|
125 | |
---|
126 | // items can easily be looked up |
---|
127 | menu.add({ |
---|
128 | text: 'Disabled Item', |
---|
129 | id: 'disableMe' // <-- Items can also have an id for easy lookup |
---|
130 | // disabled: true <-- allowed but for sake of example we use long way below |
---|
131 | }); |
---|
132 | // access items by id or index |
---|
133 | menu.items.get('disableMe').disable(); |
---|
134 | |
---|
135 | // They can also be referenced by id in or components |
---|
136 | tb.add('-', { |
---|
137 | icon: 'list-items.gif', // icons can also be specified inline |
---|
138 | cls: 'x-btn-icon', |
---|
139 | tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip' |
---|
140 | }, '-'); |
---|
141 | |
---|
142 | // add a combobox to the toolbar |
---|
143 | var store = new Ext.data.SimpleStore({ |
---|
144 | fields: ['abbr', 'state'], |
---|
145 | data : Ext.exampledata.states // from states.js |
---|
146 | }); |
---|
147 | var combo = new Ext.form.ComboBox({ |
---|
148 | store: store, |
---|
149 | displayField:'state', |
---|
150 | typeAhead: true, |
---|
151 | mode: 'local', |
---|
152 | triggerAction: 'all', |
---|
153 | emptyText:'Select a state...', |
---|
154 | selectOnFocus:true, |
---|
155 | width:135 |
---|
156 | }); |
---|
157 | tb.addField(combo); |
---|
158 | |
---|
159 | // functions to display feedback |
---|
160 | function onButtonClick(btn){ |
---|
161 | Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text); |
---|
162 | } |
---|
163 | |
---|
164 | function onItemClick(item){ |
---|
165 | Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text); |
---|
166 | } |
---|
167 | |
---|
168 | function onItemCheck(item, checked){ |
---|
169 | Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked'); |
---|
170 | } |
---|
171 | |
---|
172 | function onItemToggle(item, pressed){ |
---|
173 | Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed); |
---|
174 | } |
---|
175 | |
---|
176 | }); |
---|