JsonExport - plugin to generate XLS/XLSX from EXTJS Grid

JsonExport is a helper class who help you to generate data to use with PHPExcel to generate XLS/XLSX files.


Is based on Ext.ux.grid.Printer .

I create this plugin because i needed to export xls/xlsx from a ExtJS grid generated from a json feed.

JsonExport are two parts: client side (JsonExport.js) and server side (export_xls.php)

To setup you must define a button in your with a handler and an url to server-side file (export_xls.php)

Let's start with an example.

1. Setup path to Ext.ux location in your javascript.

Ext.Loader.setConfig({
     enabled: true,
     paths: {
         Ext: '.',   'Ext.ux': '../ux'
    }
 });

2.  Add Ext.Require Before the Grid code.

Ext.require([
      'Ext.ux.grid.JsonExport'
]);

3. Create your grid.

var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {text: 'Company',dataIndex: 'company'},
            {text: 'Price',dataIndex: 'price'},
            {text: 'Change',dataIndex: 'change'},
            {text: '% Change',dataIndex: 'pctChange'},
            {text: 'Last Updated',renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    dataIndex: 'lastChange'}
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        tbar: [{
            text: 'XLSX',
            iconCls: 'icon-print',
            handler: function () {
                var url = "http://example.com/export.php";
                Ext.ux.grid.JsonExporter.print(grid,url);
            }
        }],
        renderTo: Ext.getBody()
});

4. Export to XLSX (create a handler).

You must define url to your xls exporter. I use php and PHPExcel  which allow you to write to and read from different spreadsheet file formats, like Excel (BIFF) .xls, Excel 2007 (OfficeOpenXML) .xlsx, CSV, Libre/OpenOffice Calc .ods, Gnumeric, PDF, HTML...  
   

handler: function () {
         var url = "http://example.com/export.php";
         Ext.ux.grid.JsonExporter.print(grid,url);
}

Full example of grid.js

Ext.Loader.setConfig({
    enabled: true,
    paths: {
        Ext: '.',
            'Ext.ux': '../ux'
    }
});
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.JsonExport'
]);
Ext.onReady(function () {
    // sample static data for the store
    var myData = [
        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am']
    ];


    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
            {name: 'company'},
            {name: 'price',type: 'float'},
            {name: 'change',type: 'float'},
            {name: 'pctChange',type: 'float'},
            {name: 'lastChange',type: 'date',dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        stateful: true,
        stateId: 'stateGrid',
        columns: [
            {text: 'Company',dataIndex: 'company'},
            {text: 'Price',dataIndex: 'price'},
            {text: 'Change',dataIndex: 'change'},
            {text: '% Change',dataIndex: 'pctChange'},
            {text: 'Last Updated',renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                   dataIndex: 'lastChange'}
        ],
        height: 350,
        width: 600,
        title: 'Array Grid',
        tbar: [{
            text: 'XLSX',
            iconCls: 'icon-print',
            handler: function () {
                var url = "http://example.com/export.php";
                Ext.ux.grid.JsonExporter.print(grid,url);
            }
        }],
        renderTo: Ext.getBody()
    });
});

... and  export_xls.php

 You can find this on Github (https://github.com/gdudau/JsonExport)