3 <title>The source code</title>
\r
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">Ext.onReady(function(){
11 // Menus can be prebuilt and passed by reference
12 var dateMenu = new Ext.menu.DateMenu({
13 handler: function(dp, date){
14 Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
18 var colorMenu = new Ext.menu.ColorMenu({
19 handler: function(cm, color){
20 Ext.example.msg('Color Selected', 'You chose {0}.', color);
24 var store = new Ext.data.ArrayStore({
25 fields: ['abbr', 'state'],
26 data : Ext.exampledata.states // from states.js
29 var combo = new Ext.form.ComboBox({
31 displayField: 'state',
35 emptyText: 'Select a state...',
38 getListParent: function() {
39 return this.el.up('.x-menu');
44 var menu = new Ext.menu.Menu({
47 overflow: 'visible' // For the Combo popup
50 combo, // A Field in a Menu
53 checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
54 checkHandler: onItemCheck
56 text: 'Radio Options',
57 menu: { // <-- submenu by nested config object
59 // stick any markup in a menu
60 '<b class="menu-title">Choose a Theme</b>',
65 checkHandler: onItemCheck
70 checkHandler: onItemCheck
75 checkHandler: onItemCheck
77 text: 'Default Theme',
80 checkHandler: onItemCheck
85 text: 'Choose a Date',
87 menu: dateMenu // <-- submenu by reference
89 text: 'Choose a Color',
90 menu: colorMenu // <-- submenu by reference
95 var tb = new Ext.Toolbar();
99 text:'Button w/ Menu',
100 iconCls: 'bmenu', // <-- icon
101 menu: menu // assign menu by instance
103 new Ext.Toolbar.SplitButton({
104 text: 'Split Button',
105 handler: onButtonClick,
106 tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'},
108 // Menus can be built/referenced by using nested menu config objects
111 text: '<b>Bold</b>', handler: onItemClick
113 text: '<i>Italic</i>', handler: onItemClick
115 text: '<u>Underline</u>', handler: onItemClick
117 text: 'Pick a Color',
118 handler: onItemClick,
121 new Ext.ColorPalette({
123 select: function(cp, color){
124 Ext.example.msg('Color Selected', 'You chose {0}.', color);
129 text: 'More Colors...',
142 toggleHandler: onItemToggle,
147 // Menus have a rich api for
148 // adding and removing elements dynamically
149 var item = menu.add({
150 text: 'Dynamically added Item'
152 // items support full Observable API
153 item.on('click', onItemClick);
155 // items can easily be looked up
157 text: 'Disabled Item',
158 id: 'disableMe' // <-- Items can also have an id for easy lookup
159 // disabled: true <-- allowed but for sake of example we use long way below
161 // access items by id or index
162 menu.items.get('disableMe').disable();
164 // They can also be referenced by id in or components
166 icon: 'list-items.gif', // icons can also be specified inline
168 tooltip: '<b>Quick Tips</b><br/>Icon only button with tooltip'
171 var scrollMenu = new Ext.menu.Menu();
172 for (var i = 0; i < 50; ++i){
174 text: 'Item ' + (i + 1)
180 cls: 'x-btn-text-icon',
181 text: 'Scrolling Menu',
185 // add a combobox to the toolbar
186 var combo = new Ext.form.ComboBox({
188 displayField: 'state',
191 triggerAction: 'all',
192 emptyText:'Select a state...',
200 // functions to display feedback
201 function onButtonClick(btn){
202 Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
205 function onItemClick(item){
206 Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
209 function onItemCheck(item, checked){
210 Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
213 function onItemToggle(item, pressed){
214 Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);