Oct 08, 2012, 9:42 PM
Contextmenu Cut/Copy/Paste (Without Clipboard )
I found this solutions, without using Clipboard (because i found a lot of cross browser compatibility problems).
Maybe you can take advantage of HTML5 using localStorage or sesionStorage. In my case is enough only with global variable definition.
CSS
Add a sample image (in Spanish).
Maybe you can take advantage of HTML5 using localStorage or sesionStorage. In my case is enough only with global variable definition.
CSS
.icon-cut { background-image : url(../Resources/icons/cut_red.png) !important; }
.icon-copy { background-image : url(../Resources/icons/page_copy.png) !important; }
.icon-paste { background-image : url(../Resources/icons/page_paste.png) !important; }
I'm blocked second mouse button. And is only activated when take action over input textbox.// Global Variables
var clipBoard = null;
var selectedValue = '';
var startValue = '';
var endValue = '';
// Menu contextual copy/cut/paste
Ext.onReady(function () {
Ext.get(window.document).on('contextmenu', function (e) {
if (e.target.type == 'text') {
e.stopEvent();
clipBoard = e.target;
// Activate or Desactivate Options
if ((clipBoard.selectionEnd - clipBoard.selectionStart) == 0) {
ccpMenu.items.map.cut.setDisabled(true);
ccpMenu.items.map.copy.setDisabled(true);
}
else {
ccpMenu.items.map.cut.setDisabled(false);
ccpMenu.items.map.copy.setDisabled(false);
}
if (selectedValue.length <= 0) {
ccpMenu.items.map.paste.setDisabled(true);
}
else {
ccpMenu.items.map.paste.setDisabled(false);
}
// Show Contextmenu
ccpMenu.showAt(e.getXY());
}
else {
e.preventDefault();
return false;
}
});
});
Contextmenu creation:// Contextmenu definition Cut + Copy + Paste
var ccpMenu = new Ext.menu.Menu({
id: 'ccpMenu',
allowOtherMenus: false,
autoWidth: true,
autoHeight: true,
items: [
{
id: 'cut',
text: 'Cut',
listeners: { 'click': function () {
selectedValue = clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart);
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + endValue;
}
},
iconCls: 'icon-cut'
},
{
id: 'Copy',
text: LocalizedScript.General_AceleradorTeclado_Copiar,
listeners: { 'click': function () {
selectedValue = clipBoard.value.substr(clipBoard.selectionStart, clipBoard.selectionEnd - clipBoard.selectionStart);
}
},
iconCls: 'icon-copy'
},
{
id: 'paste',
text: 'Paste',
listeners: { 'click': function () {
startValue = clipBoard.value.substr(0, clipBoard.selectionStart);
endValue = clipBoard.value.substr(clipBoard.selectionEnd, clipBoard.value.length);
document.getElementById(clipBoard.name).value = startValue + selectedValue + endValue;
}
},
iconCls: 'icon-paste'
}
]
});
Improves and recommendation are welcome. Hope this help other.Add a sample image (in Spanish).
Last edited by equiman; Oct 08, 2012 at 9:54 PM.