extjs grid表格导出excel的完整例子
时间: 2023-05-31 16:02:49 浏览: 223
以下是一个使用ExtJS 4.2.1的完整例子,可以将Grid表格导出为Excel文件:
```
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.exporter.Exporter'
]);
Ext.onReady(function() {
// 模拟数据
var data = [];
for (var i = 0; i < 20; i++) {
data.push({
name: 'User ' + i,
email: 'user' + i + '@example.com',
phone: '555-' + Ext.Number.randomInt(1000, 9999)
});
}
// 创建数据模型
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'phone']
});
// 创建数据源
var store = Ext.create('Ext.data.Store', {
model: 'User',
data: data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'data'
}
}
});
// 创建Grid表格
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
width: 400,
height: 200,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Export to Excel',
handler: function() {
// 导出Excel
Ext.ux.exporter.Exporter.exportGrid(grid, 'Excel', {
title: 'User List'
});
}
}]
}, {
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
// 渲染Grid表格
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [grid]
});
});
```
在上面的代码中,我们首先定义了一个模拟数据数组,然后创建了一个数据模型和一个数据源。接下来,我们创建了一个Grid表格,将数据源绑定到该表格中,并添加了一个工具栏和一个分页工具栏。在工具栏中,我们添加了一个按钮,当用户单击该按钮时,将调用Ext.ux.exporter.Exporter.exportGrid函数将Grid表格导出为Excel文件。
需要注意的是,我们使用了Ext.ux.exporter.Exporter类来执行导出操作。该类是ExtJS的一个扩展,需要在应用程序中明确声明。在本例中,我们使用了Ext.require函数来加载必需的类和扩展。