Exporting Data

Exporting Data

The Exporter package enables data export to various file formats. It supports native XSLX, Excel XML as well as HTML and CSV/TSV (comma/tab separated value) formats.

The package is not bundled within the Ext JS framework, but is easy to require into your application. Whether you’re working with an application generated by Sencha Cmd or with an application structure of your own design, including the Exporter code only requires a couple of steps.

Note: This guide covers the exporter package bundled in the Premium version of the Ext JS 6.2+ SDK.

Requirements

Ext JS

Exporter works with both classic and modern toolkits of Sencha Ext JS 6.2.

Sencha Cmd

Sencha Cmd is not required to utilize the Exporter. However, using Cmd allows you to seamlessly include the Exporter package via your application’s app.json file.

Installation

Using Exporter with Sencha Cmd

The Exporter is delivered with full source code that is packaged in a way that makes it easy to deploy to your application’s packages folder.

To include the Exporter in an application then simply modify your app.json file in your application root directory to require the Exporter package:

{
    "name": "YourApp",
    "requires": [
        "exporter"
    ],
    "id": "391a5ff6-2fd8-4e10-84d3-9114e1980e2d"
}

The package supports both classic and modern toolkits so there’s no need for toolkit dependent configs.

Using the Exporter without Sencha Cmd

The SDK contains a compiled version of the Exporter’s code that is available for those not using Sencha Cmd. To include the Exporter in this manner, link the following assets from your index page:

{unzippedFolder}/packages/exporter/build/{toolkit}/exporter.js

Using Exporter

The package provides a grid plugin and classes that generate files which could also be used independently.

Grid plugin

It allows grid data export to various file formats available in the package.

The plugin adds two new methods to the grid component:

saveDocumentAs: This function will save the exported file
getDocumentData: Returns the export document content

Both functions accept a config object as parameter:

type: This is the exporter type (_defaults to excel).
title: Set a title to be shown above column headers in the exported document.
fileName: Name of the saved file.

{
    xtype: 'grid',
    plugins: 'gridexporter',
    columns: [{
        dataIndex: 'value',
        text: 'Total',
        exportStyle: {
            format: 'Currency',
            alignment: {
                horizontal: 'Right'
            }
        }
    }]
}
// later in an event listener
grid.saveDocumentAs({
    type: 'xlsx',
    title: 'My export',
    fileName: 'myExport.xlsx'
});

The following configs are available on the grid column:

ignoreExport Set to true to ignore data export for that column
exportStyle Allows you to format the exported data on that column

The exportStyle can be defined as a single object that will be used by all available exporters:

{
    xtype: 'datecolumn',
    dataIndex: 'date',
    text: 'Date',
    width: 120,
    exportStyle: {
        alignment: {
            horizontal: 'Right'
        },
        font: {
            bold: true
        },
        format: 'Short Date'
    }
}

It could also be defined as an array of objects, each object having a “type” property that specifies the exporter to which it applies:

{
    xtype: 'numbercolumn',
    dataIndex: 'price',
    text: 'Price',
    exportStyle: [{
        type: 'html', // used by the html exporter
        format: 'Currency',
        alignment: {
            horizontal: 'Right'
        },
        font: {
            italic: true
        }
    },{
        type: 'csv', // used by the csv exporter
        format: 'General'
    }]
}

When the array form is used, if the first entry does not have a “type” property it will be used for exporters that don’t have a matching entry for its type.

{
    xtype: 'numbercolumn',
    dataIndex: 'price',
    text: 'Price',
    exportStyle: [{
        // no "type" defined means this is the default
        format: 'Currency',
        alignment: {
            horizontal: 'Right'
        },
        font: {
            italic: true
        }
    },{
        type: 'csv', // only the CSV exporter has a special style
        format: 'General'
    }]
}

Pivot Grid plugin

This plugin is part of the pivot package but uses exporters to export the data. The exportStyle config used by the grid column and described in the previous section is available on the aggregate and left axis dimensions of the pivot grid.

{
    xtype: 'pivotgrid',
    plugins: 'exporter',
    matrix: {
        leftAxis: [{
            dataIndex: 'employee',
            header: 'Employee',
            exportStyle: {
                font: {
                    bold: true
                }
            }
        }],
        aggregate: [{
            dataIndex: 'price',
            header: 'Total',
            aggregator: 'sum',
            exportStyle: {
                format: 'Currency',
                alignment: {
                    horizontal: 'Right'
                },
                font: {
                    italic: true
                }
            }
        }]
        // ... more configs
    }
}

Exporters

The base class for an exporter is Ext.exporter.Base. If a new exporter is needed then a new class could be defined that extends the Base class.

Ext.define('App.exporter.Pdf', {
    extend: 'Ext.exporter.Base',
    alias: 'exporter.pdf',
    fileName: 'export.pdf',
    binary: true,
    getContent: function(){
        // generate pdf content and return it back
    }
});

The new exporter will be available for Grid and Pivot Grid Exporter plugins.

// in an event listener
grid.saveDocumentAs({
    type: 'pdf',
    title: 'My export',
    fileName: 'myExport.pdf'
    // ... other pdf specific configs
});

There are cases when tabular data that doesn’t come from a grid panel or a pivot grid needs to be exported to a file. This could be achieved using the available exporters independently.

var exporter = Ext.Factory.exporter({
    type: 'excel',
    data: {
        columns: [{
            text: 'Vacation',
            columns: [
                { text: 'Month', width: 200, style: { alignment: { horizontal: 'Right' } } },
                { text: 'Days', style: { format: 'General Number' } }
            ]
        }],
        groups: [{
            text: 'Employees',
            groups: [{
                text: 'Adrian',
                rows: [{
                    cells: [
                        { value: 'January' },
                        { value: 2 }
                    ]
                },{
                    cells: [
                        { value: 'July' },
                        { value: 10 }
                    ]
                }],
                summaries: [{
                    cells: [
                        { value: 'Total' },
                        { value: 12 }
                    ]
                }]
            },{
                text: 'John',
                rows: [{
                    cells: [
                        { value: 'March' },
                        { value: 4 }
                    ]
                },{
                    cells: [
                        { value: 'May' },
                        { value: 4 }
                    ]
                },{
                    cells: [
                        { value: 'July' },
                        { value: 2 }
                    ]
                }],
                summaries: [{
                    cells: [
                        { value: 'Total' },
                        { value: 10 }
                    ]
                }]
            }],
            summaries: [{
                cells: [
                    { value: 'Grand total' },
                    { value: 22 }
                ]
            }]
        }]
    }
});
// save the file
exporter.saveAs().then( function() { exporter.destroy(); } );

File saving

The singleton Ext.exporter.File contains functions for file manipulation. It is used by exporters to save generated files on the end-user machine. Some modern browsers allow local file saving via Blobs but others do not support this. To solve this problem the generated file content is sent to the server and returned back with proper headers that will trigger a file download. The default server that does that is defined in Ext.exporter.File#property-url which goes to https://exporter.sencha.com but an internal server could be used instead.

Check out the server folder in the exporter package for Node and PHP implementations of a server script.

Data Import & Export