Code:
Ext.define('SomeGrid', {
extend: 'Ext.grid.Panel',
uses: ['Ext.ux.exporter.Exporter'],
initComponent: function() {
this.callParent(arguments);
}
})
Ext.onReady(function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
"name": "Lisa",
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
"name": "Bart",
"email": "bart@simpsons.com",
"phone": "555--222-1234"
}, {
"name": "Homer",
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
"name": "Marge",
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('SomeGrid', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
tbar: [{
xtype: 'button',
handler: function(btn, e, options) {
// Base64 encode / decode http://www.webtoolkit.info/
var Base64 = (
function() {
// private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// private method for UTF-8 encoding
function utf8Encode(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
// public method for encoding
return {
encode: (typeof btoa == 'function') ?
function(input) {
return btoa(input);
} : function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = utf8Encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
}
};
})();
var grid = btn.up("gridpanel"),
counter = 0;
var columns = Ext.Array.filter(
grid.columns, function(col) {
return !col.hidden; // && (!col.xtype || col.xtype != "actioncolumn");
});
var sm = grid.getSelectionModel().getSelection();
var title = grid.title;
var returner = "";
var data = [];
for (var i = 0; i < grid.store.data.items.length; i++) {
data[i] = grid.store.data.items[i].data;
}
counter = data.length;
//build the header line
for (var i = 0; i < columns.length; i++) {
if (i > 0) {
returner += ",";
}
returner += columns[i].dataIndex;
}
var value;
//For each line
for (var i = 0; i < data.length; i++) {
//begins a new line
returner += "\n";
//builds a line
for (var j = 0; j < columns.length; j++) {
if (j > 0) {
returner += ",";
}
value = data[i][columns[j].dataIndex];
if (value === null) {
value = "";
}
returner += value;
}
}
//send the file
downloadDataURI({
filename: "export.csv",
data: "data:text/csv;base64," + Base64.encode(returner)
});
//display how many exported rows
Ext.MessageBox.show({
title: 'Export',
msg: counter + ' lignes ont été exportées.',
buttons: Ext.MessageBox.OK
});
}
}],
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
var downloadDataURI = function(options) {
if (!options) {
return;
}
$.isPlainObject(options) || (options = {
data: options
});
if (!$.browser.webkit) {
location.href = options.data;
}
options.filename || (options.filename = "download." + options.data.split(",")[0].split(";")[0].substring(5).split("/")[1]);
options.url || (options.url = "http://download-data-uri.appspot.com/");
$('<form method="post" action="' + options.url + '" style="display:none"><input type="hidden" name="filename" value="' + options.filename + '"/><input type="hidden" name="data" value="' + options.data + '"/></form>').submit().remove();
}
Originally Posted by arpeggian
Reply With Quote
