ExtJs - Copy GridPanel content to Clipboard

Continuing on my previous two blog posts regarding copying content to clipboard in javascript, and embedding a Flash movie in ExtJs toolbar, I present here an approach to copy content in an ExtJs GridPanel to system clipboard in various formats. The attached code allows you to export the GridPanel data in Json, CSV and Tab Delimited formats, and it should not be difficult to extend it to any other desired format.

But first, here's a demo on what I am talking about:

 

The actual copying to Clipboard is done through a Flash movie to be cross-browser as discussed in the other blog post here.

The export to various formats was comparatively a simpler task. Here's the javascript for exporting to the various formats supported:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }Ext.data.Store.prototype.serializeData = function(mode) { var store = this; var a = []; switch (mode) { case SerializationMode.Json: Ext.each(store.data.items, function(item) { a.push(item.data); }); return (Ext.encode(a)); break; default: var separator = '\t'; if (mode == SerializationMode.Csv) { separator = ','; } Ext.each(store.data.items, function(item) { var s = ''; item = item.data; for (key in item) { s = s + item[key] + separator; } s = s.substr(0, s.length - 1); a.push(s); }); return (a.join('\n')); } }{/syntaxhighlighter}

I added the above method to the ExtJs Store class itself to be able to directly export the data from any Store.

Attached below is the html and the javascript file that was used for the example above.

AttachmentSize
HTML icon grid-copy-clipboard.htm6.66 KB
File grid-copy-clipboard.js2.44 KB

Comments

Hi Rahul,

very nice job. Unfortunetly this not fits perfectly to my needs. Could you extend your script to enable to select rows with checkboxes to define which rows should have been copied to clipboard?

I am looking forward to your answer.

Best regard, rob

rahul's picture

Hi Rob, I might not be able to provide a working example immediately (the schedule is way too screwed up to look at other things).

However, you can use the CheckBoxSelectionModel for the GridPanel and just copy the selected rows.

Here's a quick code to get selected row from GridPanel's CheckBoxSelectionModel:

 

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }var selected = grd.selModel.getSelections(); Ext.each(selections, function(item) { //Do something });{/syntaxhighlighter}

Look the second grid in the following link to configure grid with a CheckBoxSelectionModel:
http://www.sencha.com/deploy/dev/examples/grid/grid-plugins.html 

 

Thanks a lot for quick and helpful answer. I will try this.

Best regards, rob

Doesn't seem to work anymore.. can you check and update this?

rahul's picture

Hi Paul, this still works perfectly for me across browsers. Can you please elaborate what issues you are facing??

This is a great solution and works quite well for us. We are creating a financial spreadsheet tool using Ext JS and the users always want to get the information into Excel for manipulation.

Hi Rahul,
I quite like your example here and would desperately like to use it in our application - only I would need to offer the data as a download (so that the browser shows the open/save dialog) and since I am an ExtJS newbie, I have to ask for help on how to do that.
Thanks in advance & greetings, Alex

rahul's picture

Hi Alex, there's no way you can present open/save dialog in browser directly from javascript. That is only shown when server sends in an explicit attachment in response to a Http request.

So, you can do either of the following:

  1. In case your data is solely on client, you would send it in a Http Request to the server, which would send it back as a attachment with proper "Content-Disposition" and "ContentType" headers.
  2. In case your data is available on server too, you can still choose 1) above, or send it directly from the server again with proper "Content-Disposition" and "ContentType" headers.

Thank you for your quick reply - too bad that it doesn't work in the client (I heard it might with a data URL, but which does not work in older IEs).
It feels a bit awkward to have the data on the client and send it back to the server just to get it back again.
I can request the data from the server again, but that results in another database call which I have done in the first place to show it in the client.

rahul's picture

Hi Alex, although I have not tried it, it might be well worth giving it a shot. Please note however that IE 7 and earlier have no support where as IE 8 has limited support only for specific tags (excluding the anchor <a> tag).

If you want to avoid the database call, then you can easily use the first option, where you send the data also from client, and server just returns it with appropriate headers.

Do let us know if data urls work for you.

Hi Rahul,

unfortunately, we have to support IE6, so a data URL is not feasable. Although, I saw it working in Ed spencer's example as well as it was mentioned from Animal on the Sencha forum.

I will go with the additional database call which in our case does not affect the performance. And for the sake of simple architecture, I will use the same method which fills the table for generating the CSV format, even though the database call is unnecessary.

Thanks for your help again.

Greetings from Germany,
Alex

Thanks a lot for such a great code! I will definetly use it in my project. God bless you.

Hi  please help above issue.

rahul's picture

Hi there, can you please elaborate which issue you are referring to?

Hi,

Can u plz tell me how to copy paste record in the same grid 

How to add and insert blank record in the grid.

And one more thing can we sort extjs gridpanel records expect my last blank record ?

i hope u understand my requirement.

 

Thnx in advance.

This seems quite awesome, got a doubt though... would summary rows be exported ?

rahul's picture

Hi Jonathan, why don't you try for yourself and see :)
Well, it won't export summary rows. As you can see in the export logic, it iterates over store records for export purposes, and summary row is NOT a store record. You might want to look into this blog post which should help you write code for exporting summary rows too. 

hi,
do you have sample to copy/paste from and into ext js grid,
can you please post the sample to paste into extjs grid.

Thanks,
Hari

rahul's picture

Hi Hari, can you please elaborate what you mean by "paste into extjs grid"?

Really cool and nice blog i like your effort.

Hii Rahul,

Thank u so much for such blogs which u share with us.... 

Problem which i m facing is when i m sorting data in ascending or descending order, data is not getting sorted properly as shown below

5.78
4.90
44.46
4.38
3.87

Please suggest why it is sorting lke this.. 

Thanks and regards,
Bhoomika

rahul's picture

Please ensure the field in your store has its data type set to float (and is not a string). From the looks of it, this seems to be a string sorting.

Thank u Rahul

Regards,
Bhoomika