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