Ext.QuickTips.init();

    //日期選擇項點擊事件
    var dateMenu = new Ext.menu.DateMenu({
        handler : function(dp, date){
           Ext.MessageBox.alert('Date Selected', String.format('You chose {0}.', date.format('M j, Y')));
        }
    });

  
    var colorMenu = new Ext.menu.ColorMenu({
        handler : function(cm,color){
           Ext.MessageBox.alert('Color Selected', String.format('You chose #{0}.', cm.palette.value));
        }
    });

    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        items: [
            {
                text: 'I like Ext',
                checked: true,     
                checkHandler: onItemCheck
            },
            {
                text: 'Ext for jQuery',
                checked: true,
                checkHandler: onItemCheck
            },
            {
                text: 'I donated!',
                checked:false,
                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: '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
            },{
                text: 'Choose a Color',
                menu: colorMenu
            }
        ]
    });

    var tb = new Ext.Toolbar();
    tb.render(Ext.getBody());

    tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu', // <-- icon
            menu: menu // assign menu by instance
        }
    );

    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();
  
    //這個增加子菜單的方法照貓畫虎學的,至于add的到底是個什么?getXType得不到,item有私有的屬性menu?
    var ele=menu.add({
        text:'submit',
        menu:{
            items:[
                {text:'submenu1',handler:onItemClick},
                {text:'submenu2',handler:onItemClick}
            ]
        }
    });
  

    // functions to display feedback
    function onButtonClick(btn){
        Ext.MessageBox.alert('Button Click',String.format('You clicked the "{0}" button.', btn.text));
    }

    function onItemClick(item){
        Ext.MessageBox.alert('Menu Click', String.format('You clicked the "{0}" menu item.', item.text));
    }

    function onItemCheck(item, checked){
        Ext.MessageBox.alert('Item Check', String.format('You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked'));
    }

    function onItemToggle(item, pressed){
        Ext.MessageBox.alert('Button Toggled', String.format('Button "{0}" was toggled to {1}.', item.text, pressed));
    }