[ExtJS5 Study notes] section 33rd Sencha ExtJS 5 grid table export Excel

The use of ExtJS must not use the table control, use the table, the leaders (general) or used to look at the data in Excel, so the technique of using the ExtJS table will certainly have the need to export form Excel, This article focuses on how to export a grid table to Excel using ExtJS, which uses a front-end export and does not involve a backend.

Directory of this document

• • Directory of this document
  • Source code Package Download
  • Embed source code in your app
  • View export buttons and export effects
  • Extended support for Sum statistics and groupsum grouping

Source code Package Download

This time using an open source project on GitHub exporter
: Https://github.com/iwiznia/Ext.ux.Exporter
After downloading, you can see the file directory is like this (already 4 years ago maintenance of the project):

Embed source code in your app

To implement the functionality, all of the files in this file are added to the project.
Then, the introduction of this JS file needs to be added on the page using the export:

<script type="text/javascript" src="<%=context %>/pages/yourpathtojsppage/export-all.js">  </script>

Before the onready of ExtJS, the following requirements are introduced:

  Ext.Loader.setConfig({ enabled: true });  Ext.Loader.setPath(‘Ext.ux.exporter‘, ‘exporter‘);   Ext.require([    ‘Ext.ux.exporter.Exporter‘  ]);

When the grid is defined, add the exported Excel entry:

    var grid = Ext.create(‘Ext.grid.Panel‘, {    frame: true,    title: ‘test‘,    columnLines: true, // 加上表格线      height: 800,    features: [{        ftype: ‘summary‘    }],         columns: [{yourclolunms}],      store: ytkbbStore,               dockedItems: [{      xtype: ‘toolbar‘,       dock: ‘top‘,      items: [{xtype: ‘exporterbutton‘,store: yourStore}]             }],    renderTo: Ext.getBody()

});

In this way, the ability to export Excel is embedded in the application.

View export buttons and export effects

Look at the grid table and find the Add button,

Export the following tabular data:

Time	Fees	kg
2014-03	227	1882.74
2014-04	146	1200.12
2014-05	187	1561.27
2014-06	111	930.18
2014-07	50 4	33.5
2014-08	150	1267.5
2014-09	164	1343.75
2014-10	134	1070.66

After exporting, Excel follows:

You can see that the data is exported correctly

Extended support for Sum statistics and groupsum grouping

Tip: Modify the Worksheet.js to adjust the table settings, and the contents of the table are here.

//增加合计行if (this.hasSum){    var style;    Ext.each(this.columns, function(col,index,self) {        style = ‘odd‘;        if (col.summaryType=="sum"){            var v = this.store.sum(col.dataIndex);            cells.push(this.buildCell(‘合计： ‘ + v, ‘String‘, style).render())        }else{            cells.push(this.buildCell(‘‘, ‘String‘, style).render())            }           }, this);    rows.push(Ext.String.format("<ss:Row>{0}</ss:Row>", cells.join("")));};

The above is the processing of the last statistic line.

//分组合计行 buildGroupSumRow: function(me, groupkey, store) {   var style,cells = [];   if (me.stripeRows === true) style = ‘odd‘;type = ‘String‘;   var insertRow = function(me){    Ext.each(me.columns, function (col, dataIndex) {      if (!col.groupSumField){          cells.push(me.buildCell(‘‘, type, style).render());      }else{          var abc = store.getGroups().getByKey( groupkey );//sumByGroup(store.groupField);          var sumabc = abc.sum(col.dataIndex);          cells.push(me.buildCell(‘合计： ‘+sumabc, type, style).render());      }    });    return Ext.String.format("<ss:Row>{0}</ss:Row>", cells.join(""));   };   return insertRow(this); }

The above is the processing of the grouping, you can implement the Sum method totals can also take the average. Ok until now, you can export the table data correctly to Excel.

[ExtJS5 Study notes] section 33rd Sencha ExtJS 5 grid table export Excel