Extjs Excel Export from grid view [Archive]

Abiram

26 Sep 2012, 10:10 PM

Hi iam new to extjs can any one help me to do excel export from grid view
the code i use is here

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<%@page import = "java.sql.*"%>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext/examples/shared/example.css" />
<link rel ="stylesheet" type ="text/css" href="ext/style.css"
<script type="text/javascript" src ="ext/ext-all.js"></script>
<script type ="text/javascript" src ="ext/bootstrap.js"></script>
<script type ="text/javascript" src ="ext-base.js"></script>
<script type="text/javascript" src ="ext/ext.js"></script>
<script type="text/javascript" src ="ext/ext-dev.js"></script>
<script type="text/javascript" src ="ext/ext-all-dev.js"></script>
<script type ="text/javascript" src ="ext/ux/exporter/Exporter-all.js"></script>
<script type="text/javascript"src="../ux/exporter/Exporter.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body bgcolor ="lightblue" background ="background1.jpg">
<form name="form1">

<table border="1">
<thead>
<tr>
<td>
<a href ="PatientPagingView.jsp" target="_top"><font size ="5" color ="white"><u>To View Patient Details </u></font></a></td>
<td><a href ="EmployeePagingView.jsp"><font size ="5" color ="white"><u>To View Employee Details </u></font></a></td>
<td><a href ="../index.jsp"><font size ="5" color ="white"><u>To Logout </u></font></a>
</td>

</tr>

</thead>
</table>
<table border="1">
<tbody>
<tr>
<td>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/hos", "root", "ims");
Statement stmt = con.createStatement();
String query = "select PatientID,PatientName,BloodGroup,Treament,Status,Consultant from patient";
ResultSet rs = stmt.executeQuery(query);
int i;
String gridData = "";
rs.last();
int numrows = rs.getRow();
rs.first();
rs.beforeFirst();

for (i = 0; i <= numrows; i++) {
while (rs.next()) {
if (gridData.equals("")) {
gridData = "['" + rs.getString(1) + "','" + rs.getString(2) + "','" + rs.getString(3) + "','" + rs.getString(4) + "','" + rs.getString(5) + "','" + rs.getString(6) + "']";
} else {
gridData += ",['" + rs.getString(1) + "','" + rs.getString(2) + "','" + rs.getString(3) + "','" + rs.getString(4) + "','" + rs.getString(5) + "','" + rs.getString(6) + "']";
}
}
}
session.setAttribute("user","Abi");
String test ="ram";
session.setAttribute("user1",test);
String ExcelSession = "user1";
rs.close();%>
<div id="PatientInfo" style='width:100%;display:block'></div>
<script type="text/javascript" >
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ext/examples/ux');
Ext.Loader.setPath('Ext.ux.exporter','../ux/exporter');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.state.*',
'Ext.ux.exporter.Exporter.*',
'Ext.ux.exporter.excelFormatter.*',
'Ext.ux.exporter.csvFormatter.*',
'Ext.ux.exporter.Button.*'
]);
var checkval;
var PatientData = [ <%= gridData%> ];
var PatientInfo = Ext.create('Ext.data.ArrayStore', {
fields: [

{name:'resource1'},
{name:'resource2'},
{name:'resource3'},
{name:'resource4'},
{name:'resource5'},
{name:'resource6'},
],
data: PatientData
});

Ext.onReady(function()
{
var exportButton = Ext.create('Ext.button.Button',{

text:"Download as.xls",
handler:function(button){
var gridPanel=button.up('gridpanel');
var dataURL='data:application/vnd.ms-excel;base64,'+Ext.ux.exporter.Exporter.exportGrid(gridPanel);
window.location.href=dataURL;
}
})
function reCheck(value, p, record){
return Ext.String.format(
'<input type="checkbox" id="check" name="check" value="{0}"/>',
record.data.resource1);
}
function buttoncheck()
{
return Ext.String.format('<input type ="button" id = "b1" name = "Edit" value = "Edit" onclick = "checke"/>');
}
var grid = Ext.create('Ext.grid.GridPanel', {
store: PatientInfo,
renderTo : 'PatientInfo',
width:screen.width-480,
title:'PatientInformation',

height:405,
columns:[
{
header: 'CheckValue',
dataIndex: 'resource1',
width:80,
renderer: reCheck,
align: 'center',
hideable: false,
sortable: false
},

{
text:'PatientName',
width:100,
sortable:true,
dataIndex:'resource2'
},
{
text:'BloodGroup',
width:70,
sortable:true,
dataIndex:'resource3'
},
{
text:'Type Of Treatment',
width:100,
sortable:true,
dataIndex:'resource4'
},
{
text:'Status',
width:100,
sortable:true,
dataIndex:'resource5'
},
{
text:'Consultant',
width:100,
sortable:true,
dataIndex:'resource6'
}

],
columnLines: true,
viewConfig: {
stripeRows: true,
trackOver: true
},
dockedItems:
[{
xtype: 'pagingtoolbar',
store: PatientInfo,
dock: 'bottom',
displayInfo:true
},

{
buttons: [
{
text: 'INSERT',
iconAlign:'center',
handler: function(){
location.href="PatientDetails.html";
}
},
{
text: 'UPDATE',
iconAlign:'center',
handler:function() {
var e= document.form1.check.length;
var cnt=0;
for(cnt=0;cnt<e;cnt++) {
if(document.form1.check[cnt].checked==true){
checkval = document.getElementsByName("check")[cnt].value;
alert(checkval);
location.href = "PatientUpdate.jsp?PatientID="+checkval;
}
}
}
},

{
text:'DELETE',
iconAlign:'center',
handler: function(){
return '<input type="button" value="Delete" onclick = "retransfer()"/>';
}
},
{
text:'Excel',
handler:function(){
location.href = "sample3.jsp";
}
},exportButton
/* {id:'grid-excel-button',
text:'Export to excel',
handler:function(){
document.location = 'data:application/vnd.ms-excel;base64,'+Base64.encode(grid.getExcelXml());
}

}*/
]
}],

tbar:[{
alias:'widget.exportbutton',
store:PatientInfo
}]
});

});
</script>
<%
} catch (Exception e) {
out.print(e);
}
%>
</td>
</tr>
</tbody>
</table>

</form>
</body>
</html>

The error i got at the time of button click on the web console. The error is Ext.ux.exporter is undefined source
Please hepl me

scottmartin

27 Sep 2012, 9:19 AM

You should not have all and src included .. remove Exporter

<script type ="text/javascript" src ="ext/ux/exporter/Exporter-all.js"></script>
<script type="text/javascript"src="../ux/exporter/Exporter.js"></script>

Have you verified the path is correct .. are there any console errors?

Scott.

Abiram

27 Sep 2012, 8:32 PM

sir i got a console error ext.ux.exporter.button is not defined

Abiram

27 Sep 2012, 8:40 PM

sir i try your suggestion but again it give a same error in error console when i click the button sir please help me
For more information i use
Extjs ----->4.0.7
Browser------>firefox

Abiram

27 Sep 2012, 8:46 PM

Type Error:Ext.ux.exporter is undefined

Abiram

1 Oct 2012, 1:36 AM

please can any one help me to rectify the problem while export the excel from gridview data

scottmartin

1 Oct 2012, 4:31 AM

Try adjusting your path:

Ext.Loader.setPath('Ext.ux.exporter','../ux');

Abiram

2 Oct 2012, 8:34 PM

The error is formatter.format is not a function in Exporter-all.js
I get a reference of this program from Edspencer tutorial
Please can you help me It is more urgent for me

scottmartin

3 Oct 2012, 4:07 AM

Can you provide the link for Ed's post on this. Are you sure it is compatible with Ext4?

Scott.

Abiram

3 Oct 2012, 5:22 AM

the link i used is http://edspencer.net/2009/11/ext-ux-exporter-export-any-grid-to-excel-or-csv.html/comment-page-2#comment-2148
in that link there is one other link to download the code
i use that link and download the code and do some alterations on that like change the datastore name and do some other changes in the code and i use that
Now it displays the error when i click the excelexport button.
The error is formatter.format is not a function in Exporter-all.js.
The script files are also downloaded from a same link.
otherwise may you give some other samples to me to run in Extjs4.0.7 to export grid data to excel
Please can you help me It is to urgent to me

scottmartin

3 Oct 2012, 5:50 AM

As I suspected, this is a very old version. I see some conversions have been attempted ...

Here is a post where someone ported to Ext4: (untested)
http://www.sencha.com/forum/showthread.php?136598

I have seen several threads in regards to this and there is always a problem with layouts and version changes, etc.

I personally prefer to do this at the server side. You can check out the following:
http://phpexcel.codeplex.com/

This allows you to get the data direct at the server and upgrades in Ext have no relation.

Scott.

Abiram

3 Oct 2012, 6:06 AM

I will try on your suggestion and one more help for me can you give some other samples also to me to done it successfully because i am new to Extjs

scottmartin

3 Oct 2012, 6:22 AM

The server solution is using PHP. Was this the direction you were going to use?

Abiram

5 Oct 2012, 2:15 AM

I get a error when i click the export button in gridview
The error i getting is

Error: NS_ERROR_OUT_OF_MEMORY: Component returned failure code: 0x8007000e (NS_ERROR_OUT_OF_MEMORY) [nsIDOMLocation.href]

The line pointed by this error is

var dataURL='data:application/vnd.ms-excel;base64,' +Ext.ux.exporter.Exporter.exportGrid(gridPanel);

window.location.href=dataURL;

can anyone please help me it is too urgent for me .
Thank's advance.