ext的学习笔记4-menu

MENU的使用
/*
* Ext JS Library 1.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* [e-mail]
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){
     Ext.QuickTips.init();

     // Menus can be prebuilt and passed by reference
     var dateMenu = new Ext.menu.DateMenu({                                                         //Menu的引用函数
         handler : function(dp, date){
             Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
         }
     });

     // Menus can be prebuilt and passed by reference
     var colorMenu = new Ext.menu.ColorMenu({
         handler : function(cm, color){
             Ext.example.msg('Color Selected', 'You chose {0}.', color);
         }
     });

     var menu = new Ext.menu.Menu({                                                                 //创建一个菜单引用
         id: 'mainMenu',
         items: [
             new Ext.menu.CheckItem({
                 text: 'I like Ext',
                 checked: true,
                 checkHandler: onItemCheck
             }),
             new Ext.menu.CheckItem({
                 text: 'Ext for jQuery',
                 checked: true,
                 checkHandler: onItemCheck
             }),
             new Ext.menu.CheckItem({
                 text: 'I donated!',
                 checked:false,
                 checkHandler: onItemCheck
             }), '-', {
                 text: 'Radio Options',
                 menu: {         // <-- submenu by nested config object
                     items: [
                         // stick any markup in a menu
                         '<b class="menu-title">Choose a Theme</b>',
                         new Ext.menu.CheckItem({
                             text: 'Aero Glass',
                             checked: true,
                             group: 'theme',
                             checkHandler: onItemCheck
                         }),
                         new Ext.menu.CheckItem({
                             text: 'Vista Black',
                             group: 'theme',
                             checkHandler: onItemCheck
                         }),
                         new Ext.menu.CheckItem({
                             text: 'Gray Theme',
                             group: 'theme',
                             checkHandler: onItemCheck
                         }),
                         new Ext.menu.CheckItem({
                             text: 'Default Theme',
                             group: 'theme',
                             checkHandler: onItemCheck
                         })
                     ]
                 }
             },{
                 text: 'Choose a Date',
                 cls: 'calendar',
                 menu: dateMenu // <-- submenu by reference                         引用日期子菜单
             },{
                 text: 'Choose a Color',
                 menu: colorMenu // <-- submenu by reference                         引用颜色子菜单
             }
         ]
     });

     var tb = new Ext.Toolbar('toolbar');                                         //创建工具bar 绑定到元素toolbar                                                        
     tb.add({
             cls: 'x-btn-text-icon bmenu', // icon and text class
             text:'Button w/ Menu',
             menu: menu   // assign menu by instance
         },
         new Ext.Toolbar.MenuButton({
             text: 'Split Button',
             handler: onButtonClick,
             tooltip: {text:'This is a QuickTip with autoHide set to false and a title', title:'Tip Title', autoHide:false},
             cls: 'x-btn-text-icon blist',
             // Menus can be built/referenced by using nested menu config objects
             menu : {items: [
                         {text: '<b>Bold</b>', handler: onItemClick},
                         {text: '<i>Italic</i>', handler: onItemClick},
                         {text: '<u>Underline</u>', handler: onItemClick}, '-',{
                         text: 'Pick a Color', handler: onItemClick, menu: {
                         items: [
                                 new Ext.menu.ColorItem({selectHandler:function(cp, color){
                                     Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                 }}), '-',
                                 {text:'More Colors...', handlernItemClick}
                         ]
                     }},
                     {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: '<b>Quick Tips</b><br/>Icon only button with tooltip'
     }, '-');

     // add a combobox to the toolbar
     var store = new Ext.data.SimpleStore({
         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
     });
     tb.addField(combo);

     // 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);
     }
});