ExtJS4 dynamically generated grid export as excel example

  • 2020-03-30 02:46:19
  • OfStack

Search for a long time, found some examples, because I am a beginner most do not know how to use.

Studied the source code, get to now finally achieve the basic download. Fixed a BUG where tables could not be downloaded repeatedly, a BUG that occurred using grid initialization

Let's record the steps. Maybe next time

1. Download to use (link: http://xiazai.jb51.net/201405/yuanma/export (jb51.net). Zip), I have already upload  

2. Add a reference to your HTML file. Note the path problem
 
<script type="text/javascript" src="../export/export-all.js" ></script>; 

3. Add at the beginning of ext.onready () of the JS code you will use
 
Ext.Loader.setConfig({ enabled: true }); 
Ext.Loader.setPath('Ext.ux.exporter', '../export/exporter'); 
Ext.require([ 
'Ext.ux.exporter.Exporter' 
]); 

Set the namespace. Pay attention to the path

4. Use it in code, where appropriate, in the grid where you need to download functionality
 
xtype: 'exporterbutton', 
// store: store 
component: Ext.getCmp('gird_a') 

These are two ways to initialize excel. One is to initialize with a store, using fields and data in the store. Because the fields name in my store is English, and the exported column name is English, I did not use this method.

Here are some of the changes I made based on someone else's code

1. In line 40, exporter. Js, changed to
 
var columns = Ext.Array.filter(grid.columnManager.columns, 

The original code was grid.columns in the first parameter, but later I found that the dynamically generated grid had columns placed in columnmanager.columns after reconfigure, so I changed it so


2. Add two sentences to line 77.78 in workbook.js
 
this.styles=[]; 
this.worksheets=[]; 

The above 2 lines of code do some initialization, otherwise the excel generated each time because the previous data did not clean up the format error

After the above simple changes can already be exported to a grid at will, and support the custom field of the table export, that is, export table columns

The effect is shown here:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140502100353.gif? 20144210456 ">  
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/20140502100520.gif? 20144210535 ">  

Related articles: