New Ext Gantt Features: Spreadsheet, Replicator And Copy/Paste

We just released Ext Gantt 4.0.3 with plenty of bug fixes and a few notable features. These new features have all been added to our advanced sample so if you’re in a hurry, you can try a new updated live example by clicking here.

Spreadsheet selection model

When the spreadsheet model was added to Ext JS, we were very happy and saw great potential. This selection class allows you to select grid cells in the left “locked” grid part of the gantt chart. Using it is as easy as:

Ext.define('App.view.Gantt', {
    extend : 'Gnt.panel.Gantt',
    
    selModel : {
        type : 'spreadsheet'
    }
});

In Ext JS 6, another cool new feature is the SelectionReplicator plugin, designed to be used together with the spreadsheet model. Now you can click and drag to copy values across cells without any typing.

After making some adaptions to it to handle our specific multi-datastore world, it’s now part of our core Gantt offering. To use it, just include it in the plugins section of your Gantt chart class:

Ext.define('App.view.Gantt', {
    extend : 'Gnt.panel.Gantt',
    
    selModel : {
        type : 'spreadsheet'
    },

    plugins : [
        'gantt_selectionreplicator'
    ]
});

Copy paste

In this new release we also support copy pasting of cell and row data. This is done by using our custom Clipboard plugin which extends the Ext JS default clipboard plugin Pasting can be done either into other gantt chart cells/rows, or into external applications such as Excel. To enable copy paste inside your Gantt chart, use the following setup (note that the grid must use the spreadsheet selection model to utilize this plugin)

Ext.define('Gnt.examples.advanced.view.Gantt', {
    extend : 'Gnt.panel.Gantt',
    plugins : [
        {
            ptype : 'gantt_clipboard',
            // data copied in raw format can be copied and pasted to other parts of the gantt
            // data in text format is copied to system clipboard and can be pasted anywhere
            source : ['raw','text']
        },
        'gantt_selectionreplicator'
    ],

The source config tells the plugin to copy either raw data, the rendered text, or both. The raw data is used when copying within the gantt chart and the text is copied to the system clipboard. Here’s a short video showing copying from the Gantt chart into a Google spreadsheet:

Check it out now

Download the latest release from our Customer Zone as usual and please let us know if you have any feedback. To view the full changelog for this release, please click here.