The source code

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

    });