Extjs右クリックメニュー作成の問題
7214 ワード
最近ext jsで右クリックメニュー効果を作成し、xtype=pannelでテストに成功しました.
パネルの上に効果が見えます.しかし、Windowsの上にmenuを作成した場合、Windowsの後ろに押されて表示されます.
解決策
floating:falseをfloating:trueに変更すれば以前と同じように使えます
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(),