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>