Ext.menu.ColumnMenu多列格局菜单 _Web前端

Ext.menu.ColumnMenu多列布局菜单
效果图：

Ext.menu.ColumnMenu类

/**
 * @class Ext.menu.ColumnMenu
 * @extends Ext.menu.Menu
 * 列布局菜单
 * @xtype columnmenu
 */
Ext.menu.ColumnMenu = function(config) {
    Ext.menu.ColumnMenu.superclass.constructor.call(this, config);
    var cols = [];
    Ext.each(this.columns, function(c) {
        cols.push(Ext.apply(c, {
            xtype: 'menu',
            hidden: false,
            hideMode: 'display',
            floating: false
        }));
    }, this);
    this.colCt = new Ext.Container({
        layout: 'column',
        width: this.menuWidth,
        items: cols
    });
    this.add(this.colCt);
};

Ext.extend(Ext.menu.ColumnMenu, Ext.menu.Menu, {
    cls: 'x-columnmenu',

    layout: {
        type: 'menu',
        itemTpl: new Ext.XTemplate('<li id="{itemId}" class="{itemCls}"></li>')
    },

    /**
     * @cfg {Number} menuWidth 菜单宽度，默认300px
     */
    menuWidth: 300,

    /**
     * @cfg {Array} columns 菜单列
     */
    
    beforeDestroy: function() {
        this.colCt.destroy();
    }
});

Ext.reg('columnmenu', Ext.menu.ColumnMenu);

测试页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ColumnMenu Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    
    <!-- Common Styles for the examples --> 
    <link rel="stylesheet" type="text/css" href="../shared/examples.css"/> 

    <!-- ** Javascript ** -->
    <!-- ExtJS library -->
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>

    <!-- extensions -->
    <!-- page specific -->
    <script type="text/javascript" src="columnmenu.js"></script>
</head>
<body>

<h1>Ext.menu.ColumnMenu</h1>

<div style="border: 3px solid #C3DAF9; height: 300px; width: 650px;">
    <div id="toolbar"></div>
</div>

<br /><br /><br /><br /><br />

</body>
</html>

测试样例JS

Ext.onReady(function() {
    Ext.QuickTips.init();
    var menu = new Ext.menu.ColumnMenu({
        menuWidth: 400,
        columns: [{
            columnWidth: .33,
            items: [{
                text: 'I like Ext',
                handler: onItemClick
            }, {
                text: 'I like Ext',
                handler: onItemClick
            }, {
                text: 'I like Ext',
                handler: onItemClick
            }, {
                text: 'I like Ext',
                handler: onItemClick
            }]
        }, {
            columnWidth: .33,
            items: [{
                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
            }]
        }, {
            columnWidth: .33,
            items: [{
                text: '<b>Bold</b>',
                handler: onItemClick
            }, {
                text: '<i>Italic</i>',
                handler: onItemClick
            }, {
                text: '<u>Underline</u>',
                handler: onItemClick
            }]
        }]
    });

    var tb = new Ext.Toolbar();
    tb.render('toolbar');
    tb.add({
        text: 'Button w/ Menu',
        menu: menu
    });
    tb.doLayout();

    function onItemClick(item) {
        msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }

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

    var msgCt;

    function createBox(t, s) {
        return ['<div class="msg">', '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>', '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>', '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>', '</div>'].join('');
    }

    function msg(title, format) {
        if (!msgCt) {
            msgCt = Ext.DomHelper.insertFirst(document.body, {
                id: 'msg-div'
            }, true);
        }
        msgCt.alignTo(document, 't-t');
        var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
        var m = Ext.DomHelper.append(msgCt, {
            html: createBox(title, s)
        }, true);
        m.slideIn('t').pause(1).ghost("t", {
            remove: true
        });
    }
});