Scroll Top

Grid-to-excel and excel-to-grid copy/paste in Sencha ExtJS 4.x

The article walks us through the steps required to implement the two-way copy-n-paste functionality between ExtJS Grid and Spreadsheet (MS Excel/OpenOffice Spreadsheet/Google Spreadsheet/etc.) using keyboard.

Problem statement:

Grid is a favorite UI component to render tabular data. Look-n-feel wise, an ExtJS Grid resembles Spreadsheet. However, Spreadsheet is much richer in functionality and convenient to use as compared to ExtJS grid. And, if you are involved in reviewing the existing records in your application (which is shown in an ExtJS grid) and add new records or massage the existing record and updated them back into the system, then it becomes a lot easier if the copy-n-paste is available across the grid and the spreadsheet. e.g. maintenance applications. In the absence of it, you will have to provide the a form panel to the user to do the data entry to add new records or edit an existing one, which makes the working with bulk data very tedious. In this article we would address this aspect by adding the copy-n-paste functionality where you can select one or more columns and rows in an ExtJS grid and copy them by pressing Ctrl-c on your keyboard and paste those copied record into the Spreadsheet program by pressing Ctrl-v and vice versa.

This articles explains you, how to implement  copy pasting grid-to-excel and vice-versa using ExtJS 4.x.

ExtJS 3.x version of the this is discussed here.


  1. ExtJS 4.0 or higher
  2. You need to have an ExtJS sample project running in your machine. If you don’t have, visit this blog to know steps to set up.

How to do?

Step 1) Create Sencha ExtJS project using Sencha Cmd

1)  Create Sencha ExtJS project by following instructions provided in this blog.

2)  While creating project using Sencha Cmd, specify project name as GridExcelCopy.

Step 2)  Edit the main view file

Edit the main view file created after your project creation in app/view/Main.js as below.

Step 3)  Define a model

Define a model in the main view file’s initComponent method (while component is being initialized).

Step 4)  Create a store

Create store after model has created.

Step 5) Create grid panel view

1)  Create a grid panel view by adding items in the view file. Add these items as childs to the main container. Get the created store while component is being initialized and refer that store to grid panel.

Run the application in browser. You should be able to see the data rendered into grid panel.

2)  Add an empty record to the countryStore after store loading completes. Add load listener for countryStore.

Run application in browser. You can see the empty row added to the grid at last.

Step 6) Implement copy functionality from grid to excel

1)  Add viewready listener to the grid panel and implement functionality for copy (Ctrl+c).

Register key mapping of Ctrl+c in viewready. Get the selected records and pass them to getCsvDataFromRecs method, which handles conversion of data.

2)  Place implementation code for getCsvDataFromRecs method.

Find the index of each row using store.find method and check for currRow value, which handles dividing items with ‘\n’.

Run the application in browser and select multiple rows

Copy the rows by pressing Ctrl+c , open a spreadsheet and paste by pressing Ctrl+v. The selected rows will be pasted in the order of selection.


3)  Implement functionality for pasting rows from Excel sheet into grid panel.

Register key mapping of Ctrl+v. Add code as an item in keymap array after Ctrl+c implementation.

4)  Place implementation code for getRecsFromCsv

5)  Edit the previously copied rows and copy them.


6) Goto grid panel view, select last empty row and paste the copied rows using Ctrl+v. Edited rows will be added from bottom.

7)  Paste the rows at any row of grid, which is already having row content.




At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.