View Full Version : Again the Copy Paste Clipboard issue

1 Oct 2007, 1:19 PM
Hey, first I want to say I really like the Ext stuff and have succesfully managed to Load the Editable Grid with XML data and even extract the same XML document with the values altered.

I was wondering if someone already solved the clipboard issue, about a way to copy selected cells/rows to clipboard and be able to paste single rows or complete tables into a text editor or spreadsheet.

One thing i came up with was to hide a textarea and everytime something gets selected update its value with textual representation of the selected cells/rows. The textarea's content will be set to selected and a press of the ctrl+c will result in the textarea's content being copied to the clipboard.

The only thing is, this is completely theoretical and I was wondering if something stumbled upon a better solution or tried this one already?

1 Oct 2007, 5:50 PM
Accessing the OS clipboard from the browser will cause some security warnings.

Here's a link I have dealing with mozilla (firefox) and the issue... I don't seem to have a reference handy for IE.


1 Oct 2007, 11:30 PM
Ok, that might solve it in firefox, but is it allowed using the default security settings?
Ofcourse, the ultimate goal is for it to work in the major browser list which extjs itself supports.

I guess I was searching for a method that doesn't require special plugins, components or activex controls.

I'll try this one first and maybe there's one for IE, safari and opera.

1 Oct 2007, 11:38 PM
Here (http://www.paraesthesia.com/archive/2005/01/20/ie-users-javascript-can-access-your-clipboard.aspx#)'s a reference for IE, seems far easier.

Open it in IE, IE will ask permission to access the clipboard.

2 down, 2 to go...


Safari: CopyAndPaste (http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/CopyAndPaste.html)

2 Oct 2007, 7:03 AM
I dug through my old code repository to find where I had needed this. Here's a code snippet that I think works in all major browsers, but verify to be sure...

function copyText(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", ""+ text); // stupid IE... won't work without the ""+ ?!?!?
} else if (window.netscape) { // Mozilla
try {

var gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);

} catch(e) {
return alert(e +'\n\nPlease type: "about:config" in your address bar.\nThen filter by "signed".\nChange the value of "signed.applets.codebase_principal_support" to true.\nYou should then be able to use this feature.');
} else {
return alert("Your browser does not support this feature");

4 Oct 2007, 12:41 AM
The firefox solution doesn't really seem I nice solution, the user needs to dive into the config settings of firefox and change a boolean value. After that, it pretty much interacts with the user the same way IE does.

Jeffothy’s Keyings has copied and update a solution from Mark O’Sullivan. It uses a small macromedia flash file to write to the clipboard itself. The text will be passed by URL encoded parameter. http://www.jeffothy.com/weblog/clipboard-copy/

The only disadvantage is that Flash must be installed, which might be a problem in business environment.

Tested in:

Internet Explorer 7.0.5730.11
Opera 9.23
Safari 3.0.3

4 Oct 2007, 6:04 PM
Why can't use the Browser's built in ability to copy text to the clipboard ? The problem is that the grid does not allow you to select the text to copy. If it did, we would not be having this discussion. Is there an easy way to allow proper text selection from grid cells?

13 Oct 2007, 7:11 AM
I'm still working on a way to export to clipboard in tabs separated values. This way you can paste it to a spreadsheet. This already works, but doesn't take into account the fact that columns can be swapped or hidden, it should consider the current viewport.

// Clipboard class (needs the .swf file)
Clipboard = {

setData : function(text){
var divholder = document.createElement('div');
divholder.innerHTML = '<embed src="./lib/clipboard/_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
window.setTimeout(function(){document.body.removeChild(divholder)}, 10000);


// copy selected rows from grid to clipboard
var str = '';
var selRecords = grid.getSelections();
for ( var i = 0 ; i < selRecords.length ; i ++ ){
var record = selRecords[i];
var tab = false;
for ( var j in record.data )
if (tab) {
str = str + '\\t'
} else {
tab = true;
str = str + record.data[j];
str = str + '\\n';

TODO: check for Flash installed (anyone??), copy current visible selection instead of source data record.

13 Oct 2007, 7:18 AM
Why can't use the Browser's built in ability to copy text to the clipboard ? The problem is that the grid does not allow you to select the text to copy. If it did, we would not be having this discussion. Is there an easy way to allow proper text selection from grid cells?

Don't know what the extjs developers think of this, but as I understand it:
The extjs simulates a selection, because normal text selection doesn't really provide nice graphical results combined with extjs grid. Thus, this simulated selection can't be copied to clipboard. The simulated selection does however provide a way to select multiple, not necessary adjacent, rows and combined with the flash solution, just how I like it.

14 Oct 2007, 1:20 AM
* @class Ext.ux.clipBoard
* @extends Ext.util.Observable
* @version 0.1
* Simulates systems clipboard behaviors. However the data is stored via System Clipboard,
* Any data will be serialized as String(Todo).
* FireFox fails to get the clipbord data dut to 'Denied Permission'.More details at:
* http://developer.mozilla.org/en/docs/Using_the_Clipboard
* @param {Mixed} data
* @param {Boolean} copyORcut True if this action is 'CUT', othetwise "COPY".Default action is "COPY".
Ext.ux.clipBoard = function(data,copyORcut){
// 'copyORcut' could be boolean(true/fale),undefiend.
this.deleteDataAfterPaste = !!copyORcut;
"copy" : true,
"cut" : true,
"paste" : true,
"beforepaste" : true

this.clipBoardDataHolder = Ext.DomHelper.append(document.body,{
Ext.extend(Ext.ux.clipBoard, Ext.util.Observable, {
* @private
* @properties
* @type {Boolean} deleteDataAfterPaste True if this action is 'CUT',
* othetwise "COPY".Default action is "COPY".
* @type {Boolean} clipBoardHasData True if ClipBoard Has Data.
if(!this.fireEvent('copy', data)) return false;
if(!this.fireEvent('cut', data)) return false;
var tempSwf = Ext.DomHelper.append(document.body,{
return true;
//for IE ok!
var data = this.clipBoardDataHolder.innerHTML;

if(!this.fireEvent('beforepaste', data, this.deleteDataAfterPaste)){
this.clipBoardDataHolder.innerHTML = '';
this.clipBoardHasData = false;
this.fireEvent('paste', data, this.deleteDataAfterPaste);
Well, let me put this code for real practice then I'll upgrard it.:">

14 Oct 2007, 10:15 AM
TODO: check for Flash installed (anyone??), copy current visible selection instead of source data record.


Surinder singh
31 May 2009, 11:50 AM

Here is the excel grid by which user can select cells like Excel sheet, and copy paste To/From excel sheet to extjs grid. More important it does not use any flash to copy data to clipboard.I have tested it in Firefox 3.0.10, IE6, Safari 3.2.2. but there is some bug on mouse selection in Safari, i am working on it.

Extract the zip, copy the files as structure given in it.

3 Jun 2009, 4:42 AM
I have done the little hack you descriped a while ago.

just take a look at http://extjs.com/forum/showthread.php?t=64477

4 Feb 2010, 8:16 PM
as of flash 10 the flash version above does not work