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.