Extjs 右键菜单创建问题

最近用ext js 创建一个右键菜单效果，我在xtype=pannel上面测试成功

    Ext.onReady(function () {
        var pan = Ext.create('Ext.window.Window', {
             800,
            title: '我的面板',
            renderTo: Ext.getBody(),
            items: [{ xtype: 'image',
                id: 'img_01',
                src: 'http://www.j01.cc/Content/images/xihongshi.jpg',
                listeners: {
                    afterrender: function (cmp, eOpts) {
                        /*右键菜单*/
                        var MyImg = Ext.getDom("img_01");
                        //Mozilla系列中需要使用 addEventListener
                        if (MyImg.addEventListener) {
                            // MyImg.addEventListener("contextmenu", CreateMenu, false);
                            MyImg.oncontextmenu = function (e) {
                                return CreateMenu(e);
                            }
                        } else {
                            //if(MyImg.attachEvent) 
                            MyImg.attachEvent("oncontextmenu", CreateMenu)
                        }
                        function CreateMenu(e) {
                            var x = e.clientX - 5;
                            var y = e.clientY - 5;
                            if (this.menu) {
                                this.menu.destroy();
                            };
                            this.menu = Ext.create('Ext.menu.Menu', {
                                 100,
                                margin: '0 0 10 0',
                                floating: false,
                                renderTo: Ext.getBody(),
                                listeners: {
                                    hide: function () {
                                    },
                                    mouseleave: function (menu, e, eOpts) {
                                        menu.destroy();
                                    }
                                },
                                items: [{
                                    text: '修改图片',
                                    handler: function () {
                                        alert("修改图片");
                                    }
                                }, {
                                    text: '预览图片',
                                    handler: function () {
                                        Ext.create('Ext.window.Window', {
                                            title: '预览图片',
                                            layout: 'fit',
                                            x: x,
                                            y: y,
                                             MyImg.width,
                                            height: MyImg.height,
                                            modal: true,
                                            items: [{
                                                xtype: 'image',
                                                src: MyImg.src,
                                                border: false
                                            }]
                                        }).show();
                                    }
                                }]
                            });
                            this.menu.showAt(x, y);

                            return false;
                        }
                    }
                }
            }]
        }).show();
    });

都能在panel上面看到效果。但是如果是在window上面创建menu却被压在了window的后面显示。

解决办法

把floating:false改成floating:true就可以了跟以前一样用了

 

this.menu = Ext.create('Ext.menu.Menu', {
                                 100,
                                margin: '0 0 10 0',
                                floating:true,
                                renderTo: Ext.getBody(),