PDA

View Full Version : hi, does any one help me on export the excelsheet in extjs4.1



Ashulove
17 May 2012, 2:16 AM
My code is:-
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="FormWithExcel.js"></script>
<!--<script type="text/javascript" src="export.js"></script>-->
<!--<link href='resources/css/ext-all.css' rel='stylesheet' type='text/css' />
<script src="adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-all.js" type="text/javascript"></script>-->
<script src="Exporter-all.js" type="text/javascript"></script>
</head>
</html>
Ext.onReady(function(){


var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "computer scince",
"name": "computer scince"
}, {
"abbr": "B.A",
"name": "B.A"
}, {
"abbr": "B.com",
"name": "B.com"
}, {
"abbr": "BCA",
"name": "BCA"
}, {
"abbr": "MBA",
"name": "MBA"
}, {
"abbr": "MCA",
"name": "MCA"
}, {
"abbr": "M.com",
"name": "M.com"
} //...
]
});
var myform = new Ext.form.FormPanel({
bodyPadding: 18,
width: 280,
height: 300,
collapsible: true,
frame: true,
title: 'Registration Form',
style: 'padding-bottom: 5px',
style: 'padding-left: 15px',
id: 'formm',
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'text1',
allowBlank: false,
width: 220,
id: 'text1',

}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'text2',
allowBlank: false,
width: 220,
id: 'text2'
}, {
xtype: 'textfield',
vtype: 'email',
fieldLabel: 'Email',
allowBlank: false,
name: 'email',
width: 220

}, {
xtype: 'numberfield',
//anchor:'100%',
id: 'phone',
fieldLabel: 'Contact No.',
//minvalue:0,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
name: 'phone',
allowBlank: false,
width: 220

}, {
xtype: 'radio',
fieldLabel: 'Select Gender',
boxLabel: 'Male',
name: 'radio1',
id: 'radio1',
checked: true,
inputValue: 'Male'
}, {

xtype: 'radio',
padding: '0 0 0 105',
boxLabel: 'Female',
name: 'radio1',
id: 'rd2',
inputValue: 'Female'
}, {
xtype: 'combo',
fieldLabel: 'Select Subject',
// emptyText: "Select Subject...",
id: 'combo1',
name: 'combo1',
allowBlank: false,
width: 220,
store: states,
valueField: 'abbr',
displayField: 'name',
renderTo: Ext.getBody()
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Select ',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'part Time',
name: 'topping',
inputValue: '1',
id: 'checkbox1'
}, {
boxLabel: 'Full TIme',
name: 'topping',
inputValue: '2',

id: 'checkbox2'
}]
}],
buttons: [{
text: 'Submit',
handler: function(){
values = myform.getValues();
if (myform.getForm().isValid()) {
Ext.Ajax.request({
url: 'FormWithExcel.php',
params: {
firstname: values.text1,
lastname: values.text2,
email: values.email,
phone: values.phone
},
method: 'POST',
success: function(response){
Ext.MessageBox.alert('Success', 'Data Save success ');
},
failure: function(result){
Ext.MessageBox.alert('failure', 'Data failure' + result.responseText);
}
});
}
}
}, {
text: 'Reset',
handler: function(){
myform.getForm().reset();
},

}],
renderTo: Ext.getBody()
});

var stored = Ext.create('Ext.data.Store', {
fields: ['firstname', 'lastname', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'excelsheet.php',
reader: {
type: 'json',
root: 'sdata'
}
}



});

var gridd = Ext.create('Ext.grid.Panel', {
title: 'Selective Grid',
collapsible: true,
id:'grid',
closable: true,
style: 'padding-left: 15px',
width: 800,
store: stored,

/* plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
pluginId: 'rowEditing'
})],*/
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Export',
id: 'linkButton',
handler: function(){
//alert("ghhkj");
window.location='data:appliaction/vnd.ms-excel;base64,'+Base64.encode(grid.getExcelXml());
},
}],
}],
columns: [{
text: 'firstname',
sortable: true,
dataIndex: 'firstname'
}, {
text: 'lastname',

dataIndex: 'lastname'
}, {
text: 'email',
flex: 1,
dataIndex: 'email'
}, {
text: 'phone',
dataIndex: 'phone'
}],
renderTo: Ext.getBody()
});
/*Ext.create('Ext.button.Button',{
text:'Download as .xls',
handler:function(button){
var gridPanel=button.up('gridd');
var dataURL='data:application/vnd.ms-excel;base64,'+Ext.ux.exporter.Exporter.exportGrid(gridPanel);
window.location.href=dataURL;
gridd.getTopToolbar().add(exportButton);
}
})*/
/*var exportButton = new Ext.ux.Exporter.Button({
component:gridPanel ,
text : "Download as .xls"
});

gridd.getTopToolbar().add(exportButton);*/
});
**
*
* Base64 encode / decode
* http://www.webtoolkit.info/
*
**/


var Base64 = (function() {


// private property
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";


// private method for UTF-8 encoding
function utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}


// public method for encoding
return {
encode : (typeof btoa == 'function') ? function(input) { return btoa(input); } : function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = utf8Encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
}
return output;
}
};
})();


Ext.LinkButton = Ext.extend(Ext.Button, {
template: new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><a class="x-btn-text" href="{1}" target="{2}">{0}</a></td><td class="x-btn-right"><i> </i></td>',
"</tr></tbody></table>"),

onRender: function(ct, position){
var btn, targs = [this.text || ' ', this.href, this.target || "_self"];
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
var btnEl = btn.child("a:first");
btnEl.on('focus', this.onFocus, this);
btnEl.on('blur', this.onBlur, this);


this.initButtonEl(btn, btnEl);
Ext.ButtonToggleMgr.register(this);
},


onClick : function(e){
if(e.button != 0){
return;
}
if(!this.disabled){
this.fireEvent("click", this, e);
if(this.handler){
this.handler.call(this.scope || this, this, e);
}
}
}


});


Ext.override(Ext.grid.GridPanel, {
getExcelXml: function(includeHidden) {
var worksheet = this.createWorksheet(includeHidden);
var totalWidth = this.getColumnModel().getTotalWidth(includeHidden);
return '<?xml version="1.0" encoding="utf-8"?>' +
'<ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:o="urn:schemas-microsoft-com:office:office">' +
'<o:DocumentProperties><o:Title>' + this.title + '</o:Title></o:DocumentProperties>' +
'<ss:ExcelWorkbook>' +
'<ss:WindowHeight>' + worksheet.height + '</ss:WindowHeight>' +
'<ss:WindowWidth>' + worksheet.width + '</ss:WindowWidth>' +
'<ss:ProtectStructure>False</ss:ProtectStructure>' +
'<ss:ProtectWindows>False</ss:ProtectWindows>' +
'</ss:ExcelWorkbook>' +
'<ss:Styles>' +
'<ss:Style ss:ID="Default">' +
'<ss:Alignment ss:Vertical="Top" ss:WrapText="1" />' +
'<ss:Font ss:FontName="arial" ss:Size="10" />' +
'<ss:Borders>' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Top" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Bottom" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Left" />' +
'<ss:Border ss:Color="#e4e4e4" ss:Weight="1" ss:LineStyle="Continuous" ss:Position="Right" />' +
'</ss:Borders>' +
'<ss:Interior />' +
'<ss:NumberFormat />' +
'<ss:Protection />' +
'</ss:Style>' +
'<ss:Style ss:ID="title">' +
'<ss:Borders />' +
'<ss:Font />' +
'<ss:Alignment ss:WrapText="1" ss:Vertical="Center" ss:Horizontal="Center" />' +
'<ss:NumberFormat ss:Format="@" />' +
'</ss:Style>' +
'<ss:Style ss:ID="headercell">' +
'<ss:Font ss:Bold="1" ss:Size="10" />' +
'<ss:Alignment ss:WrapText="1" ss:Horizontal="Center" />' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#A3C9F1" />' +
'</ss:Style>' +
'<ss:Style ss:ID="even">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCFFFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evendate">' +
'<ss:NumberFormat ss:Format="[ENG][$-409]dd\-mmm\-yyyy;@" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="even" ss:ID="evenfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'<ss:Style ss:ID="odd">' +
'<ss:Interior ss:Pattern="Solid" ss:Color="#CCCCFF" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="odddate">' +
'<ss:NumberFormat ss:Format="[ENG][$-409]dd\-mmm\-yyyy;@" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddint">' +
'<ss:NumberFormat ss:Format="0" />' +
'</ss:Style>' +
'<ss:Style ss:Parent="odd" ss:ID="oddfloat">' +
'<ss:NumberFormat ss:Format="0.00" />' +
'</ss:Style>' +
'</ss:Styles>' +
worksheet.xml +
'</ss:Workbook>';
},


createWorksheet: function(includeHidden) {


// Calculate cell data types and extra class names which affect formatting
var cellType = [];
var cellTypeClass = [];
var cm = this.get(View().getHeaderCt());
var totalWidthInPixels = 0;
var colXml = '';
var headerXml = '';
for (var i = 0; i < cm.getColumnCount(); i++) {
if (includeHidden || !cm.isHidden(i)) {
var w = cm.getColumnWidth(i)
totalWidthInPixels += w;
colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
headerXml += '<ss:Cell ss:StyleID="headercell">' +
'<ss:Data ss:Type="String">' + cm.getColumnHeader(i) + '</ss:Data>' +
'<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));
switch(fld.type) {
case "int":
cellType.push("Number");
cellTypeClass.push("int");
break;
case "float":
cellType.push("Number");
cellTypeClass.push("float");
break;
case "bool":
case "boolean":
cellType.push("String");
cellTypeClass.push("");
break;
case "date":
cellType.push("DateTime");
cellTypeClass.push("date");
break;
default:
cellType.push("String");
cellTypeClass.push("");
break;
}
}
}
var visibleColumnCount = cellType.length;


var result = {
height: 9000,
width: Math.floor(totalWidthInPixels * 30) + 50
};


// Generate worksheet header details.
var t = '<ss:Worksheet ss:Name="' + this.title + '">' +
'<ss:Names>' +
'<ss:NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + this.title + '\'!R1:R2" />' +
'</ss:Names>' +
'<ss:Table x:FullRows="1" x:FullColumns="1"' +
' ss:ExpandedColumnCount="' + visibleColumnCount +
'" ss:ExpandedRowCount="' + (this.store.getCount() + 2) + '">' +
colXml +
'<ss:Row ss:Height="38">' +
'<ss:Cell ss:StyleID="title" ss:MergeAcross="' + (visibleColumnCount - 1) + '">' +
'<ss:Data xmlns:html="http://www.w3.org/TR/REC-html40" ss:Type="String">' +
'<html:B><html:U><html:Font html:Size="15">' + this.title +
'</html:Font></html:U></html:B></ss:Data><ss:NamedCell ss:Name="Print_Titles" />' +
'</ss:Cell>' +
'</ss:Row>' +
'<ss:Row ss:AutoFitHeight="1">' +
headerXml +
'</ss:Row>';


// Generate the data rows from the data in the Store
for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
t += '<ss:Row>';
var cellClass = (i & 1) ? 'odd' : 'even';
r = it[i].data;
var k = 0;
for (var j = 0; j < cm.getColumnCount(); j++) {
if (includeHidden || !cm.isHidden(j)) {
var v = r[cm.getDataIndex(j)];
t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';
if (cellType[k] == 'DateTime') {
t += v.format('Y-m-d');
} else {
t += v;
}
t +='</ss:Data></ss:Cell>';
k++;
}
}
t += '</ss:Row>';
}


result.xml = t + '</ss:Table>' +
'<x:WorksheetOptions>' +
'<x:PageSetup>' +
'<x:Layout x:CenterHorizontal="1" x:Orientation="Landscape" />' +
'<x:Footer x:Data="Page &amp;P of &amp;N" x:Margin="0.5" />' +
'<x:PageMargins x:Top="0.5" x:Right="0.5" x:Left="0.5" x:Bottom="0.8" />' +
'</x:PageSetup>' +
'<x:FitToPage />' +
'<x:Print>' +
'<x:PrintErrors>Blank</x:PrintErrors>' +
'<x:FitWidth>1</x:FitWidth>' +
'<x:FitHeight>32767</x:FitHeight>' +
'<x:ValidPrinterInfo />' +
'<x:VerticalResolution>600</x:VerticalResolution>' +
'</x:Print>' +
'<x:Selected />' +
'<x:DoNotDisplayGridlines />' +
'<x:ProtectObjects>False</x:ProtectObjects>' +
'<x:ProtectScenarios>False</x:ProtectScenarios>' +
'</x:WorksheetOptions>' +
'</ss:Worksheet>';
return result;
},


});

Ashulove
17 May 2012, 2:17 AM
plz someone helpme ,thnx in advance.....

scottmartin
17 May 2012, 9:26 AM
What are you using to create your XLS? Extension or your code?

I usually prefer to use server side solutions for printing documents.

Regards,
Scott.

Ashulove
17 May 2012, 10:16 PM
I have use
window.location='data:appliaction/vnd.ms-excel;base64,'+Base64.encode(Ext.getCmp('grid').getExcelXml())
to get the excelfile...

scottmartin
24 May 2012, 10:49 AM
Are you having problems displaying the XLS, or it is not created properly? Are you saving it locally?
Please provide more details as to what problem you are having exactly.

Regards,
Scott

anuragchaturvedi
2 Sep 2012, 1:26 AM
Hi All,

but when I export to word or Excel then downloaded file does not show extension .doc or xls.

Thanks