ExtJS学习之menu

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

  
    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 menu = new Ext.menu.Menu({
        id: 'mainMenu', 
        items: [    //定义菜单中的元素
            {
                text: 'I like Ext',
                checked: true,     
                checkHandler: onItemCheck
            },
         
           '-',  //添加菜单上的分隔符
           {
                text: 'Radio Options',
                menu: {       //定义二级菜单
                    items: [
                         '<b class="menu-title">Choose a Theme</b>',
                        {
                            text: 'Aero Glass',
                            checked: true,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }, {
                            text: 'Vista Black',
                            checked: false,
                            group: 'color',
                            checkHandler: onItemCheck
                        }
                    ]
                }
            },
            {
                text: 'Choose a Date',
                iconCls: 'calendar',
                menu: dateMenu
            },
            {
                text: 'Choose a Color',
                menu: colorMenu    //这里前面定义了
            }
        ]
    });

    var tb = new Ext.Toolbar();  
    tb.render('toolbar');

    tb.add({
            text:'Button Menu',
            iconCls: 'bmenu',  //
            menu: menu  //分配menu到toolbar
        });

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

});


在html中加入    <div id="toolbar"></div>