ExtJS 4.2 将网格数据导出到可下载的 CSV 文件
Posted
技术标签:
【中文标题】ExtJS 4.2 将网格数据导出到可下载的 CSV 文件【英文标题】：ExtJS 4.2 export grid data to downloadable CSV file 【发布时间】：2016-02-20 16:52:34 【问题描述】：我想在我的 EXT JS 面板中创建一个下载按钮，当单击下载/导出 EXTJS 网格到可下载的 CSV 文件时。 PS：我认为我们可以使用存储数据或我在网格存储中填充数据的 JSON 将数据填充到 CSV 文件中 我已经尝试过 Ext.ux.CSVExporter 但我无法成功使用它。 我当前的代码是：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="Formatter.js"></script>
<script type="text/javascript" src="CSVFormatter/CSVFormatter.js"></script>
<script type="text/javascript" src="ExcelFormatter/Cell.js"></script>
<script type="text/javascript" src="ExcelFormatter/Style.js"></script>
<script type="text/javascript" src="ExcelFormatter/Workbook.js"></script>
<script type="text/javascript" src="ExcelFormatter/Worksheet.js"></script>
<script type="text/javascript" src="ExcelFormatter/ExcelFormatter.js"></script>
<script type="text/javascript" src="Exporter.js"></script>
<script type="text/javascript" src="ExporterButton.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager',
requires: ['Ext.ProgressBar'],
/**
* @cfg Number width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 225,
/**
* @cfg String defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* @cfg Object defaultAnimCfg
* <p>A @link Ext.fx.Anim Ext.fx.Anim configuration object.</p>
*/
defaultAnimCfg :
duration: 1000,
easing: 'bounceOut'
,
/**
* Creates new ProgressBarPager.
* @param Object config Configuration options
*/
constructor : function(config)
if (config)
Ext.apply(this, config);
,
//public
init : function (parent)
var displayItem;
if (parent.displayInfo)
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem)
parent.remove(displayItem, true);
this.progressBar = Ext.create('Ext.ProgressBar',
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style:
cursor: 'pointer'
,
listeners:
el:
scope: this,
click: this.handleProgressBarClick
);
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
,
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e)
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
,
// private, overriddes
parentOverrides :
// private
// This method updates the information via the progress bar.
updateInfo : function()
if(this.displayItem)
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
);
Ext.onReady(function()
var field = [];
var columnList = [];
var counter =
"levels":
[
"name": "class",
"samples": [
"name": "1660SH_3",
"features": [
"count": 8,
"name": "Bacteroidia"
,
"count": 9,
"name": "Bacteroidiaa"
,
"count": 10,
"name": "Bacteroidiab"
,
"count": 11,
"name": "Bacteroidiac"
]
,
"name": "1660SH_4",
"features": [
"count": 5,
"name": "Bacteroidia"
,
"count": 6,
"name": "Bacteroidiaa"
,
"count": 7,
"name": "Bacteroidiab"
,
"count": 8,
"name": "Bacteroidiac"
]
]
, ]
;
columnList.push(
header: "Sample v/s Feature",
dataIndex: "Sample v/s Feature",
width: 0.1 * Ext.getBody().getViewSize().width,
columnLines: true,
locked: true
);
field.push("Sample v/s Feature");
for (var p = 0; p < Object.keys(counter.levels[0].samples).length; p++)
columnList.push(
header: counter.levels[0].samples[p].name,
dataIndex: counter.levels[0].samples[p].name,
flex: 1,
columnLines: true
);
field.push(counter.levels[0].samples[p].name);
if (counter.levels[0].name == 'class')
var mydata=[];
for (var p = 0; p < Object.keys(counter.levels[0].samples[0].features).length; p++)
var s = [];
s["Sample v/s Feature"] = '<b>' + counter.levels[0].samples[0].features[p].name + '</b>';
for (var j = 0; j < Object.keys(counter.levels[0].samples).length; j++)
s[counter.levels[0].samples[j].name] = counter.levels[0].samples[j].features[p].count;
mydata.push(s);
var store = Ext.create('Ext.data.ArrayStore',
autoLoad: false,
pageSize : 2,
fields: field,
data:
count:mydata.length,
data:mydata
,
proxy:
type:"memory",
enablePaging: true,
data:mydata,
reader:
type: 'json',
root: 'data',
);
store.load(
params:
// specify params for the first page load if using paging
start: 0,
limit: 2,
);
var classTable = Ext.create('Ext.grid.Panel',
style: 'border: solid Blue 1px',
id: 'family',
renderTo: Ext.getBody(),
store: store,
requires: [
'Ext.ux.exporter.Exporter'
],
columns: columnList,
columnLines: true,
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
bbar:
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
,
dockedItems:[
xtype: 'toolbar',
dock: 'top',
items: [
xtype: 'exporterbutton',
text: 'export data'
]
]
);
);
</script>
</head>
<body>
</body>
</html>
【问题讨论】：
【参考方案1】：repository link使用这个项目
这里是如何使用它的示例fiddle link
首先将存储库文件复制到您的 ext 库的 ux 文件夹中，该文件夹位于 exporter 文件夹下的 ext/src/ux 中。完整路径将是 ext/src/ux/exporter/[repository_files] 并修改你的网格
var classTable = Ext.create('Ext.grid.Panel',
style: 'border: solid Blue 1px',
id: 'family',
renderTo: Ext.getBody(),
store: store,
requires: [
'Ext.ux.exporter.Exporter'
],
columns: columnList,
columnLines: true,
width: Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height,
bbar:
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager()
,
dockedItems:[
xtype: 'toolbar',
dock: 'top',
items: [
xtype: 'exporterbutton',
text: 'exrpot data'
]
]
);
【讨论】：
我已经编辑了我的代码......我尝试了你所说的......我包含了你提到的所有文件......但是按下导出按钮......没有任何反应......我收到一条错误消息“Uncaught TypeError: col.getXType is not a function”........我正在制作一个独立的 html 文件并使用 EXTJS 4.2 它对我有用。你能提供小提琴吗？如果它不起作用，则不需要。我只需要完整的代码来跟踪问题 这是小提琴fiddle.sencha.com/#fiddle/160l的链接。我没有将存储库包含到应用程序目录中（我不知道该怎么做：（）请包含那些存储库文件.... . PS：我认为exporter的代码只能在ext js 5.1及以上版本中工作......它不适用于4.2......请找到我的问题的解决方案 github.com/iwiznia/Ext.ux.Exporter sencha.com/forum/showthread.php?136598-Export-store-to-Excel ....请检查这是否可以帮助我获得所需的功能 抱歉，工作忙。今天已经太晚了（这里:)）。明天我会尽力帮助你以上是关于ExtJS 4.2 将网格数据导出到可下载的 CSV 文件的主要内容，如果未能解决你的问题，请参考以下文章
在 extjs 4.2 中将数据从商店设置到具有网格的表单面板