GEARBOX

Import / Export - XLS(X) & CSV

Introducing Gearbox Import / Export //

Imagine having the possibility to import and export XLS(X) and CSV data directly in ExtJS applications. With no server code and only one line of client code. The Gearbox Import/Export Gear makes this possible.

Why you need this Gear //

Most companies still use Excel to manipulate and disseminate data. Your clients will expect the applications that you build for them to have excel export functionality at the very least, and preferably also a way to easily import data.

While ExtJS applications are great for working with complex and interrelated data, implementing this functionality is complicated and time consuming. A solution typically requires complex client and server code to set up the data structure, read the excel data, create the components, create and edit records and so on. Adding drag-and-drop functionality to the equation complicates matters further.

Implementing Excel importing and exporting through a drag-and-drop interface requires:

  • Creation of client file import functionality, including drag and drop file uploads
  • Client upload of file to server
  • Server parsing of XLS, XLSX or CSV formats
  • Creating JSON data for the client to handle and returning it to the client
  • Mapping of Excel data to store/model attributes and Grid columns
  • Properly parsing/formatting the record attributes and their types
  • Reading of Import data into local app
  • Saving imported records to server or storage

Implementing the above in a properly architected and reliable way can take weeks to months of developer effort. Believe us... we've done it!

 
 

Don't waste your precious development time, because the Gearbox Import/Export Gear handles all this for you. Just drop the package into your client application and you're set, no server code and only 1 line of client code needed!

How Gearbox Import-Export solves your problem //

The Gearbox Import/Export Gear consists of an import and export component. Both components operate completely client-side without any need for server code or external calls. The Gear includes unit and functional tests with a very high code coverage.

Import

With the Gearbox import package the steps needed are:

Load the gearbox import/export package using Sencha CMD:

{
    "name": "MyApp",
    "requires": [
        "gearbox-data-file"
    ],
    "id": "6f844633-8dee-4968-a5bd-17a2e1e2f9cf"
}

Create a store that extends 'Gearbox.data.file.Store':

Ext.define('MyApp.store.Example', {
    extend: 'Gearbox.data.file.Store',
    model: 'MyApp.model.Example',
    storeId: 'ImportExport',
    proxy: {
        type: 'file'
    }
});

Set the proxy to the type of file it should expect (XLS, XLSX or CSV) and manually load the file or attach drag and drop behaviour to any ExtJS component:

// Manual Import
var store = Ext.getStore('ImportExport');
store.getProxy().setReader('file.xls');
store.loadFile(myExcelFile);
 
 
// OR Drag and drop import
store.bindDrop(grid);

Import/Export Gear (only import/export)

// Manually map Excel columns to Model fields
store.setMapping({
    firstName: {
        source: "First Name"
    },
    lastName: {
        source: "Last Name"
    }
});
 
// OR use automatic mapping
store.guessMapping();

Done!

Export

Like the Import, no server code is required to be able to export Grid data to an excel sheet. The steps needed to get an XLSX file containing all data from a grid are:

var grid = Ext.getCmp('MyGrid'); // Never use getCmp in practice!
store.getProxy().setWriter('file.xlsx');
store.sync({
    title: 'My Excel sheet title',
    columns: grid.columns,
    callback: function(batch) {
        batch.packet.save();
    }
});

An XLSX download is started immediately.

 

See the Import / Export Gear in action //

The grid below is a simple grid panel that accepts drag and drop upload of XLS, XLSX and CSV data and is able to export it's data to CSV or XLSX. You can either download one of the following Excel files and then drag them onto the grid or upload your own Excel file. Check out the screencast beside it to see how easy it was to build this.

Convinced? //