如何实现 <em>Ext</em> grid导出<em>Excel</em&g

近期在做一个项目，项目的要求是：
利用Ext grid显示前台数据，然后把前台数据进行e799bee5baa6e59b9ee7ad94362Excel表导出，再导出报表的时候要求：
1、要把grid数据显示的表头信息导入Excel表
2、在导出Excle表的时候，可以进行选择，是进行勾选的导出，还是批量导出（勾选导出，根据勾选的记录导出，批量导出，全部导出），
3、在进行批量导出的时候，是分页显示还是显示成一页（sheet标签，在Excel表中用）

首先，我们先准备数据，创建grid并把数据填充进去，这里我就不再多说，不是本文的重点：
但需要说明的是，在进行store准备数据的时候，我们要保证命名的规范性，为接下来的利用java反射取得数据打下基础，

接下来根据要求，我们设计一个按钮，当点击按钮的时候，弹出一个窗口，即上图中的图片，为我们提供选择
还有就是要得到grid数据的表头信息

关键代码：strBuffer为我们自己重写的StringBuffer类
for(var j=2; j<columns.getColumnCount(); j++){
strBuffer1.append(columns.getColumnHeader(j)); /*得到所有列头信息并放入StringBuffer中*/
strBuffer1.append(","); /*添加分隔符*/
}
那为什么我们要在每一个字段之后加上一个“，”号呢？这里我们把数据传递到后台做准备的，这样我们就只需要把一个字符串传递到后台中，然后再在后台中利用java的split方法把数据再提取出来
得到勾选的数据的编号，即数据在数据库的id号，我们也是利用字符串向后台进行传递：
for(var k=2; k<columns.getColumnCount(); k++){
strBuffer2.append(columns.getDataIndex(k)); /*得到所有列头信息并放入StringBuffer中*/
strBuffer2.append(","); /*添加分隔符*/
}

已经把前台的各项数据都已经得到，那么就需要向后台来传递啦！！
这里我们是做出了一个Ext的一个简单的弹出窗口来实现的，如第一个图中，
这里我们是利用Ext.form的submit()方式进行的提交，在这里一定要注意是submit()方式，而不能是Ajax，这与我们后面的弹出导出Excel的窗口是紧密相连的，关键代码：
var f = new Ext.FormPanel({
frame:true,
layout:"form",
buttonAlign:'center',
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.action= url;
this.getEl().dom.method = 'post',
this.getEl().dom.submit(),
win.close()
},
…………

var btnSubmit = new Ext.Button({
text: "提交",
handler: function(){
f.getForm().submit();
}
});

以这种方式提交，并不是真正的Ajax，而是类似于普通Html的表单提交方式，
看后台代码如何来解析从前台获得的数据：

String empStr = request.getParameter("headers"); //拆分字符串得到表头信息
if(!"".equals(empStr) && null!= empStr){
String str1 = empStr.substring(0, empStr.length()-1);
headers = str1.split(",");
}

这样就把前台的数据传递到后台，然后就是进行流的输入输出，生成Excel:关键代码如下
WritableWorkbook wwb = Workbook.createWorkbook(os);
for (int j = 0; j < title.length; j++) {// 开始写入第一行(即标题栏)
Label label = null; // 用于写入文本内容到工作表中去
label = new Label(j, 0, title[j]); // 在Label对象的构造中指明单元格位置(参数依次代表列数、行数、内容 )
sheet.setColumnView(j, 30); // 将定义好的单元格添加到工作表中
sheet.addCell(label);
}

for (int row = 0; row < empList.size(); row++) { // 开始写入内容
List list = (List) empList.get(row); // 获取一条(一行)记录
for (int col = 0; col < list.size(); col++) { // 数据是文本时(用label写入到工作表中)
String listvalue = (String) list.get(col).toString();
Label label = null;
label = new Label(col, row + 1, listvalue);
sheet.addCell(label);
}
}

然后就是弹出窗口，提示用户进行“打开”或者是“保存”啦！！
OutputStream out = null;
InputStream in = null;
// 获得文件名
String filename = URLEncoder.encode(file.getName(), "UTF-8");
// 定义输出类型(下载)
response.setContentType("application/force-download");
response.setHeader("Location", filename);

// 定义输出文件头
response.setHeader("Content-Disposition", "attachment;filename="
+ filename);
out = response.getOutputStream();
in = new FileInputStream(file.getPath());

byte[] buffer = new byte[1024];
int i = -1;
while ((i = in.read(buffer)) != -1) {
out.write(buffer, 0, i);
}

in.close();
out.flush();
out.close();

if (isDel) {
// 删除文件,删除前关闭所有的Stream.
file.delete();
}

然后就会弹出窗口：

至此，我们的工作基本完成！！！
常规的ExtJS的Store，在new一个Store控件的时候，加上proxy属性，指向URL，在URL里返回特定格式e69da5e6ba90e79fa5e98193365的JSON数据即可。
var store = new Ext.data.Store({
// 获取数据的方式
proxy : new Ext.data.HttpProxy({
url : 'cardSell.ered?reqCode=queryCrdSellList4CX'
}),
});
取出Store中的全部数据，再封装成JSON格式，传回后台。（extjs store中数据转换成json）。
主要有以下两种方法：
1、var jsonData = Ext.encode(Ext.pluck(store.data.items, 'data'));
2、var datar = new Array();
var jsonDataEncode = "";
var records = store.getRange();
for (var i = 0; i < records.length; i++) {
datar.push(records[i].data);
}
jsonDataEncode = Ext.util.JSON.encode(datar);

数据-导入外部数据