ExtJS 的工具条及菜单

Efs Frame 中的下拉菜单：

                <div xtype="tbar">

                    <div text="->"></div>
                    <div iconCls="icon-ok2" id="getNextButton" text="下一条数据"
                        onEfsClick="onGetNextButtonClick()"></div>

                    <div iconCls="icon-ok2" id="reloadButton" text="重新加载"
                        onEfsClick="onReloadButtonClick()"></div>



                    <div iconCls="icon-ok2" id="updateButton" text="保存"
                        onEfsClick="onUpdateButtonClick()"></div>

                    <div iconCls="icon-ok2" id="verifyPassButton" text="审核通过#V"
                        onEfsClick="onVerifyButtonClick('已审核')"></div>

                    <div iconCls="icon-ok2" id="verifyFailButton" text="审核未通过#V"
                        onEfsClick="onVerifyButtonClick('审核未通过')"></div>

                    <div iconCls="icon-ok2" id="uploadPassButton" text="确定上传#V"
                        onEfsClick="onUploadButtonClick('确定上传')"></div>

                    <div iconCls="icon-ok2" id="uploadFailButton" text="不上传#V"
                        onEfsClick="onUploadButtonClick('不上传')"></div>


                    <div iconCls="icon-deal" text="审核通过并确定上传">
                        <div iconCls="icon-del" text="审核通过并确定上传"
                            onEfsClick="onVerifyAndUploadButtonClick()"></div>
                        <div text="-"></div>
                        <div iconCls="icon-add" text="审核通过"
                            onEfsClick="onVerifyButtonClick('已审核')"></div>
                        <div iconCls="icon-add" text="审核未通过"
                            onEfsClick="onVerifyButtonClick('审核未通过')"></div>
                        <div text="-"></div>
                        <div iconCls="icon-del" text="确定上传"
                            onEfsClick="onUploadButtonClick('确定上传')"></div>
                        <div iconCls="icon-del" text="不上传"
                            onEfsClick="onUploadButtonClick('不上传')"></div>
                    </div>

                    <div iconCls="icon-del" id="deleteButton" text="删除#D"
                        onEfsClick="onDeleteButtonClick()"></div>
                </div>

大家可以看到，非常的方便，只要 嵌套 Div 就可以了。

下面是 Extjs 的 官方代码，版本：4.2.0

Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.menu.*',
    'Ext.form.field.ComboBox',
    'Ext.layout.container.Table',
    'Ext.container.ButtonGroup'
]);

Ext.onReady(function(){
    
    // functions to display feedback
    function onButtonClick(btn){
        Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.displayText || 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);
    }
    
    Ext.QuickTips.init();

    var dateMenu = Ext.create('Ext.menu.DatePicker', {
        handler: function(dp, date){
            Ext.example.msg('Date Selected', 'You choose {0}.', Ext.Date.format(date, 'M j, Y'));

        }
    });

    var colorMenu = Ext.create('Ext.menu.ColorPicker', {
        handler: function(cm, color){
            Ext.example.msg('Color Selected', '<span style="color:#' + color + ';">You choose {0}.</span>', color);
        }
    });

    var store = Ext.create('Ext.data.ArrayStore', {
        fields: ['abbr', 'state'],
        data : Ext.example.states
    });

    var combo = Ext.create('Ext.form.field.ComboBox', {
        hideLabel: true,
        store: store,
        displayField: 'state',
        typeAhead: true,
        queryMode: 'local',
        triggerAction: 'all',
        emptyText: 'Select a state...',
        selectOnFocus: true,
         135,
        indent: true
    });

    var menu = Ext.create('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
                        '<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 // <-- submenu by reference
           },{
               text: 'Choose a Color',
               menu: colorMenu // <-- submenu by reference
           }
        ]
    });
    
    Ext.get('container').setWidth(Ext.themeName === 'neptune' ? 860 : 750);

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

    tb.add({
            text:'Button w/ Menu',
            iconCls: 'bmenu',  // <-- icon
            menu: menu  // assign menu by instance
        }, {
            text: 'Users',
            iconCls: 'user',
            menu: {
                xtype: 'menu',
                plain: true,
                items: {
                    xtype: 'buttongroup',
                    title: 'User options',
                    columns: 2,
                    defaults: {
                        xtype: 'button',
                        scale: 'large',
                        iconAlign: 'left',
                        handler: onButtonClick
                    },
                    items: [{
                        text: 'User<br/>manager',
                        iconCls: 'edit',
                         Ext.themeName === 'neptune' ? 130 : 100,
                        displayText: 'User manager'
                    },{
                        iconCls: 'add',
                        tooltip: 'Add user',
                         40,
                        displayText: 'Add user'
                    },{
                        colspan: 2,
                         '100%',
                        text: 'Import',
                        scale: 'small',
                         Ext.themeName === 'neptune' ? 175 : 140
                    },{
                        colspan: 2,
                         '100%',
                        text: 'Who is online?',
                        scale: 'small',
                         Ext.themeName === 'neptune' ? 175 : 140
                    }]
                }
            }
        },
        Ext.create('Ext.button.Split', {
            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: '<b>Bold</b>', handler: onItemClick
                }, {
                    text: '<i>Italic</i>', handler: onItemClick
                }, {
                    text: '<u>Underline</u>', handler: onItemClick
                }, '-', {
                    text: 'Pick a Color',
                    handler: onItemClick,
                    menu: {
                        showSeparator: false,
                        items: [
                            Ext.create('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.add('&#160;');

    // 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<br><b>Activated on mousedown</b>',
        clickEvent: 'mousedown',
        handler: function(){
            Ext.example.msg('Button Click','You clicked the "icon only" button.');
        }
    }, '-');

    var scrollMenu = Ext.create('Ext.menu.Menu');
    for (var i = 0; i < 50; ++i){
        scrollMenu.add({
            text: 'Item ' + (i + 1),
            handler: onItemClick
        });
    }
    // scrollable menu
    tb.add({
        icon: 'preview.png',
        cls: 'x-btn-text-icon',
        text: 'Scrolling Menu',
        menu: scrollMenu
    });

    tb.add({
        text: 'Link',
        url: 'http://www.google.com/search',
        baseParams: {
            q: 'html+anchor+tag'
        },
        tooltip: 'This is a link. You can right click. You can see where it will take you'
    });

    // add a combobox to the toolbar
    combo = Ext.create('Ext.form.field.ComboBox', {
        hideLabel: true,
        store: store,
        displayField: 'state',
        typeAhead: true,
        queryMode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        135
    });
    tb.add(combo);
    tb.resumeLayouts(true);
});

下面截取了部分代码（跟上面的代码是重复的，只是提取部分代码）

var menu = Ext.create('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
                        '<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 // <-- submenu by reference
           },{
               text: 'Choose a Color',
               menu: colorMenu // <-- submenu by reference
           }
        ]
    });