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.
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
Doesn’t seem to work anymore.. can you check and update this?
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
Thanks a lot for such a great code! I will definetly use it in my project. God bless you.
Hi please help above issue.
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 ?
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
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
bookmarked!!, I love your blog!