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
3. Add at the beginning of ext.onready () of the JS code you will use
Set the namespace. Pay attention to the path
4. Use it in code, where appropriate, in the grid where you need to download functionality
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
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
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 ">
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 ">