X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/menus.html?ds=sidebyside diff --git a/docs/source/menus.html b/docs/source/menus.html new file mode 100644 index 00000000..fb0259c6 --- /dev/null +++ b/docs/source/menus.html @@ -0,0 +1,219 @@ + +
+Ext.onReady(function(){ + Ext.QuickTips.init(); + + // Menus can be prebuilt and passed by reference + var dateMenu = new Ext.menu.DateMenu({ + handler: function(dp, date){ + Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y')); + } + }); + + var colorMenu = new Ext.menu.ColorMenu({ + handler: function(cm, color){ + Ext.example.msg('Color Selected', 'You chose {0}.', color); + } + }); + + var store = new Ext.data.ArrayStore({ + fields: ['abbr', 'state'], + data : Ext.exampledata.states // from states.js + }); + + var combo = new Ext.form.ComboBox({ + store: store, + displayField: 'state', + typeAhead: true, + mode: 'local', + triggerAction: 'all', + emptyText: 'Select a state...', + selectOnFocus: true, + width: 135, + getListParent: function() { + return this.el.up('.x-menu'); + }, + iconCls: 'no-icon' + }); + + var menu = new Ext.menu.Menu({ + id: 'mainMenu', + style: { + overflow: 'visible' // For the Combo popup + }, + items: [ + combo, // A Field in a Menu + { + text: 'I like Ext', + checked: true, // when checked has a boolean value, it is assumed to be a CheckItem + checkHandler: onItemCheck + }, '-', { + text: 'Radio Options', + menu: { // <-- submenu by nested config object + items: [ + // stick any markup in a menu + 'Choose a Theme', + { + text: 'Aero Glass', + checked: true, + group: 'theme', + checkHandler: onItemCheck + }, { + text: 'Vista Black', + checked: false, + group: 'theme', + checkHandler: onItemCheck + }, { + text: 'Gray Theme', + checked: false, + group: 'theme', + checkHandler: onItemCheck + }, { + text: 'Default Theme', + checked: false, + group: 'theme', + checkHandler: onItemCheck + } + ] + } + },{ + text: 'Choose a Date', + iconCls: 'calendar', + menu: dateMenu // <-- submenu by reference + },{ + text: 'Choose a Color', + menu: colorMenu // <-- submenu by reference + } + ] + }); + + var tb = new Ext.Toolbar(); + tb.render('toolbar'); + + tb.add({ + text:'Button w/ Menu', + iconCls: 'bmenu', // <-- icon + menu: menu // assign menu by instance + }, + new Ext.Toolbar.SplitButton({ + text: 'Split Button', + handler: onButtonClick, + tooltip: {text:'This is a an example QuickTip for a toolbar item', title:'Tip Title'}, + iconCls: 'blist', + // Menus can be built/referenced by using nested menu config objects + menu : { + items: [{ + text: 'Bold', handler: onItemClick + }, { + text: 'Italic', handler: onItemClick + }, { + text: 'Underline', handler: onItemClick + }, '-', { + text: 'Pick a Color', + handler: onItemClick, + menu: { + items: [ + new Ext.ColorPalette({ + listeners: { + select: function(cp, color){ + Ext.example.msg('Color Selected', 'You chose {0}.', color); + } + } + }), '-', + { + text: 'More Colors...', + handler: onItemClick + } + ] + } + }, { + text: 'Extellent!', + handler: onItemClick + }] + } + }), '-', { + text: 'Toggle Me', + enableToggle: true, + toggleHandler: onItemToggle, + pressed: true + }); + + menu.addSeparator(); + // Menus have a rich api for + // adding and removing elements dynamically + var item = menu.add({ + text: 'Dynamically added Item' + }); + // items support full Observable API + item.on('click', onItemClick); + + // items can easily be looked up + menu.add({ + text: 'Disabled Item', + id: 'disableMe' // <-- Items can also have an id for easy lookup + // disabled: true <-- allowed but for sake of example we use long way below + }); + // access items by id or index + menu.items.get('disableMe').disable(); + + // They can also be referenced by id in or components + tb.add('-', { + icon: 'list-items.gif', // icons can also be specified inline + cls: 'x-btn-icon', + tooltip: 'Quick Tips+ + \ No newline at end of file
Icon only button with tooltip' + }, '-'); + + var scrollMenu = new Ext.menu.Menu(); + for (var i = 0; i < 50; ++i){ + scrollMenu.add({ + text: 'Item ' + (i + 1) + }); + } + // scrollable menu + tb.add({ + icon: 'preview.png', + cls: 'x-btn-text-icon', + text: 'Scrolling Menu', + menu: scrollMenu + }); + + // add a combobox to the toolbar + var combo = new Ext.form.ComboBox({ + store: store, + displayField: 'state', + typeAhead: true, + mode: 'local', + triggerAction: 'all', + emptyText:'Select a state...', + selectOnFocus:true, + width:135 + }); + tb.addField(combo); + + tb.doLayout(); + + // functions to display feedback + function onButtonClick(btn){ + Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text); + } + + function onItemClick(item){ + Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text); + } + + function onItemCheck(item, checked){ + Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked'); + } + + function onItemToggle(item, pressed){ + Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed); + } + +});