Extjs右クリックメニュー作成の問題

7214 ワード

最近ext jsで右クリックメニュー効果を作成し、xtype=pannelでテストに成功しました.
    Ext.onReady(function () {
        var pan = Ext.create('Ext.window.Window', {
            width: 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', {
                                width: 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,
                                            width: MyImg.width,
                                            height: MyImg.height,
                                            modal: true,
                                            items: [{
                                                xtype: 'image',
                                                src: MyImg.src,
                                                border: false
                                            }]
                                        }).show();
                                    }
                                }]
                            });
                            this.menu.showAt(x, y);

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

パネルの上に効果が見えます.しかし、Windowsの上にmenuを作成した場合、Windowsの後ろに押されて表示されます.
解決策
floating:falseをfloating:trueに変更すれば以前と同じように使えます
 
this.menu = Ext.create('Ext.menu.Menu', {
                                width: 100,
                                margin: '0 0 10 0',
                                floating:true,
                                renderTo: Ext.getBody(),