extjs4中Ext.menu.Menu 菜单功能实例代码

[Js]
    //下定义一个下拉列表
    var combo = Ext.create('Ext.form.ComboBox', {
        store: new Ext.data.ArrayStore({
            fields: ['id', 'name'],
            data: [[1, "张三"], [2, "李四"], [3, "王五"], [4, "赵六"]]
        }),
        displayField: 'name',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText: '请选择..',
        selectOnFocus: true,
        width: 135
    });

    //这里是菜单的定义
    var menu = Ext.create('Ext.menu.Menu', {
        id: 'mainMenu',
        style: {
            overflow: 'visible'
        },
        items: [
            combo,
            {
                text: '复选框',
                checked: true
            }, '-', {
                text: '单选子菜单',
                menu: {
                    items: [
                        '请选择一个人名',
                        {
                            text: '张三',
                            checked: true,
                            group: 'theme'
                        }, {
                            text: '李四',
                            checked: false,
                            group: 'theme',
                            checkHandler: function () {
                                Ext.MessageBox.alert("消息", "李四被选择！")
                            }
                        }, {
                            text: '王五',
                            checked: false,
                            group: 'theme'
                        }, {
                            text: '赵六',
                            checked: false,
                            group: 'theme'
                        }
                    ]
                }
            }, {
                text: '请选择一个日期',
                menu: Ext.create('Ext.menu.DatePicker', {
                    handler: function (dp, date) {
                        Ext.MessageBox.alert('消息', '你选择了:' + date.format('Y-m-d'));
                    }
                })
            }, {
                text: '选择一个颜色',
                menu: Ext.create('Ext.menu.ColorPicker', {
                    handler: function (cm, color) {
                        Ext.MessageBox.alert('消息', '你选择了：' + color);
                    }
                })
            }
        ]
    });

[Js]
    //把菜单附加到工具栏上
    var panel = new Ext.Panel({
        renderTo: 'div1',
        width: 600,
        height: 250,
        collapsible: true,
        layout: 'fit',
        title: '演示工具栏',
        tbar: [{ text: "菜单", menu: menu}]
    });

[Js]
    //定义右键菜单
    Ext.getDoc().on('contextmenu', function (e, o) {
        e.preventDefault();
        menu.showAt(e.getXY());

        //第二种写法：
        //e.stopEvent();
        //menu.showAt([e.getPageX(), e.getPageY()]);
    });

[Js]
    var store = new Ext.data.JsonStore({
        fields: [
        { name: 'IntData', type: 'int' },
        { name: 'StringData', type: 'string' },
        { name: 'TimeData', type: 'date' }
       ],
        proxy: {
            type: 'ajax',
            url: 'ListView1Json',
            reader: {
                type: 'json',
                root: 'rows'
            }
        },
        sortInfo: { field: 'IntData', direction: 'DESC' }
    });
    store.load();

    var listView = Ext.create('Ext.ListView', {
        renderTo: "div1",
        store: store,
        multiSelect: true,
        emptyText: '无数据',
        reserveScrollOffset: true,
        hideHeaders: false,
        columns: [{
            header: "IntData",
            dataIndex: 'IntData'
        }, {
            header: "StringData",
            dataIndex: 'StringData'
        }, {
            header: "TimeData",
            dataIndex: 'TimeData',
            align: 'right',
            xtype: 'datecolumn',
            format: 'm-d h:i a'
        }],
        viewConfig: {
            stripeRows: true,
            listeners: {
                itemcontextmenu: function (view, rec, node, index, e) {
                    e.stopEvent();
                    menu.showAt(e.getXY());
                    return false;
                }
            }
        }
    });