GridPanel directly to Excel.

[Animal]

Actually, the way you changed it, you don't need to do anything else because your click handler recalculates and sets the document.location to the recalculated data URL, so you're OK.

[NoahK17]

That's what I originally thought too Animal, but when you try to export to Excel, you get an XML error upon opening the file:

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.03

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.47

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.34

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.02

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.49

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	-1.54

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.71

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.39

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.04

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.28

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.34

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	-0.64

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	-0.23

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	3.74

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.03

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	-0.08

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.13

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.58

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.54

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.09

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.15

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	2.4

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.01

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.54

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.45

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.58

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.02

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.02

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	2.38

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	0.88

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.11

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.47

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
VALUE:	1.63

XML ERROR in Table
REASON:	Bad Value
FILE:	C:\DOCUME~1\NKRONE~1\LOCALS~1\Temp\ze37lz52.xls.xls
GROUP:	Cell
TAG:	Data
ATTRIB:	Type
VALUE:	undefined

I'm not the best with XML, but I'll let you know if I figure out a work-around.

[Animal]

Yes, Excel is very fussy about the XML format.

Try saving it as text, and editing it with LiquidXML. Those error messages might give you some clue as to what it doesn't like. It looks like it is getting the undefined value from Record.get(dataIndex) and writing that into the XML.

I don't know why it doesn't like the numbers. You'd have to edit the XML to take a look.

[NoahK17]

I found the bug....

OPEN:
ExportGridToExcel.js

CHANGE: (around line 216)

t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[j] + '">';

TO:

t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ss:Data ss:Type="' + cellType[k] + '">';

It was mentioned on the first page. Now everything works perfectly. Thanks Animal!!

[NoahK17]

Animal: An issue arises in your Plugin if there are any Grid Modifications, such as GridRowExpander, which adds a blank title column, and "expand/collaspe" icons as cells.

Anyhoo, here is an updated ExportGridToExcel.js, with my changes highlighted in Red.

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.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.getColumnModel();
        var totalWidthInPixels = 0;
        var colXml = '';
        var headerXml = '';
        var visibleColumnCountReduction = 0;
        for (var i = 0; i < cm.getColumnCount(); i++) {
            if (includeHidden || !cm.isHidden(i)) {
                var w = cm.getColumnWidth(i)
                totalWidthInPixels += w;
                if (cm.getColumnHeader(i) === ""){
                	cellType.push("None");
                	cellTypeClass.push("");
                	++visibleColumnCountReduction;
                }
                else
                {
	                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 - visibleColumnCountReduction;

        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>Generated by ExtJS</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)];
                    if (cellType[k] !== "None") {

	                    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;
    }
});

[pokerking400]

How many rowexpander plugins out there?. I try to use saki rowexpander plugin and Rowaction plugin , i have hit the wall.

Row expander + sign shows up and does n't drop and action column is there and no icons shows up.

i have spent 5 hrs on it still could n't make it work..sucks

oh well...

[johnlicy]

Hi

In our application we also require to export the grid data to excel. I followed the same steps as mentioned here. I am getting script error 'Invalid Syntax'.

Please help me out with this issue.

Regards
Licy Ambrose

Alright, I've successfully implimented this mod. Here are the easy-mode directions for new users to ExtJS.

Create a new file, save it as ExportGridToExcel.js with this content:

/**
 * allows for downloading of grid data (store) directly into excel
 * Method: extracts data of gridPanel store, uses columnModel to construct XML excel document,
 * converts to Base64, then loads everything into a data URL link.
 *
 * @author		Animal		<extjs support team>
 *
 */

/**
 * base64 encode / decode
 * 
 * @location 	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.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.getColumnModel();
        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>Generated by ExtJS</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[j] + '">';
                        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;
    }
});

Now, call this newly created JS file in the header of your application (php/html/etc), after you call your standard ExtJS files. You'll have to change your directory structure to however you have things set-up.

<script type="text/javascript" src="libs/js/ExportGridToExcel.js"></script>

Finally, we want to add the "Export to Excel" button using the bottom-bar of your grid. So in the config options, add this:

				bbar: new Ext.Toolbar({
        			buttons: [{
    					id: 'grid-excel-button',
    					text: 'Export to Excel...',
						handler: function(){
							document.location='data:application/vnd.ms-excel;base64,' + Base64.encode(grid.getExcelXml());
						}
    				}]
				})

Now when you load your grid, at the bottom you should see a new button. Clicking that button will open the SAVE AS dialog box with the entire content of your grid available in the Excel format.

Cheers!

[DamienValentine]

I guess you should check line breaks. Sometimes line is divided into two separate blocks and second block is placed as a new line.

[radtad]

I seem to be getting a weird output in Excel using the example code. I copied the code completely and the attachment is what I get in Excel 2000.

Also, I've tried the same code on the Linux side using gnumeric and receive a "EntityRef: expectiing ';' " erorr.

Both are running on FireFox 2+.

[DamienValentine]

This problem is definitely in your ExportToExcel.js
Try to replace your file with mine - my file works good for me except in certain grids which I do not code completely.