You are hereBlogs / rahul's blog / ExtJs - Copy GridPanel content to Clipboard
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:
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'));
}
}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.
| Attachment | Size |
|---|---|
| grid-copy-clipboard.htm | 6.66 KB |
| grid-copy-clipboard.js | 2.44 KB |







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
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:
var selected = grd.selModel.getSelections(); Ext.each(selections, function(item) { //Do something });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?
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
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:
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.
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.
Post new comment