1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    10
    Vote Rating
    0
    spire_extjs_admin is on a distinguished road

      0  

    Default Export a gridview to excel not working in IE 7

    Export a gridview to excel not working in IE 7


    Hello,

    I am getting below issue in IE. Please help me as soon as possible.

    Functionality: Export a gridview to excel.

    Issue: Download button works fine with firefox, but in internet explorer window is going in to hang stage.

    In tbar m using this.

    {
    iconCls:'xlsDownload',
    text:'  Download',
    tooltip:'Click to Download',
    handler:function(){
    window.location = 'data:application/vnd.ms-excel;base64,' + Base64.encode(candListingGrid.getExcelXml());
    }
    },
    new Ext.Toolbar.Separator

    and i am using Export.js in head of parent page like this
    <script type="text/javascript" src="Script/Exporter.js"></script>


    Containt of export.js :-

    /*
    * To change this template, choose Tools | Templates
    * and open the template in the editor.
    */

    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 xmlnss="urnchemas-microsoft-com:officepreadsheet" xmlns:x="urnchemas-microsoft-com:office:excel" xmlns:o="urnchemas-microsoft-com:office:office">' +
    '<oocumentProperties><o:Title>' + this.title + '</o:Title></oocumentProperties>' +
    '<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 flagStatus = false;
    for (var i = 0; i < cm.getColumnCount(); i++) {
    if(i!=0){
    if (includeHidden || !cm.isHidden(i)) {
    if(cm.getColumnHeader(i) == 'Fitment'){
    flagStatus= true;
    }
    var w = cm.getColumnWidth(i)
    totalWidthInPixels += w;
    colXml += '<ss:Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
    headerXml += '<ss:Cell ss:StyleID="headercell">' +
    '<ssata ss:Type="String">' + cm.getColumnHeader(i) + '</ssata>' +
    '<ss:NamedCell ss:Name="Print_Titles" /></ss:Cell>';
    var fld = this.store.recordType.prototype.fields.get(cm.getDataIndex(i));

    switch("String") {
    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,
    xml:''

    };
    // 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) + '">' +
    '<ssata 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>Generated by ExtJs</ssata><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(j!=0){
    if(j==1){
    v = i+1;

    t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ssata ss:Type="' + cellType[k] + '">';
    if (cellType[k] == 'DateTime') {
    t += v.format('Y-m-d');
    } else {
    t += v;
    }
    t +='</ssata></ss:Cell>';
    k++;
    }else if(flagStatus && j==7){
    var fouthcolumnValue= r[cm.getDataIndex(8)];
    var fitmentValue= null;
    fitmentValue = r[cm.getDataIndex(11)];
    var pasScore=(passPercentageStr =passPercentageStr != undefined?passPercentageStr:0);
    if(fouthcolumnValue == null || fouthcolumnValue == '') {
    v = '';
    } else if(fouthcolumnValue*1>= pasScore*1){
    if(fitmentValue == '2.00'){
    v = 'OverFit';
    }else{
    v = 'Fit';
    }
    } else if (fouthcolumnValue*1 < pasScore*1){
    v = 'UnFit';
    }

    t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ssata ss:Type="' + cellType[k] + '">';
    if (cellType[k] == 'DateTime') {
    t += v.format('Y-m-d');
    } else {
    t += v;
    }
    t +='</ssata></ss:Cell>';
    k++;
    }else{
    t += '<ss:Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><ssata ss:Type="' + cellType[k] + '">';
    if (cellType[k] == 'DateTime') {
    t += v.format('Y-m-d');
    } else {
    t += v;
    }
    t +='</ssata></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 xata="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 />' +
    '<xoNotDisplayGridlines />' +
    '<x:ProtectObjects>False</x:ProtectObjects>' +
    '<x:ProtectScenarios>False</x:ProtectScenarios>' +
    '</x:WorksheetOptions>' +
    '</ss:Worksheet>';
    return result;
    }
    });
    function change(val){
    if(val > 0){
    return '<span style="color:green;">' + val + '</span>';
    }else if(val < 0){
    return '<span style="color:red;">' + val + '</span>';
    }
    return val;
    }

    // example of custom renderer function
    function pctChange(val){
    if(val > 0){
    return '<span style="color:green;">' + val + '%</span>';
    }else if(val < 0){
    return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
    }


    Thanks,

    Rahul Srivastava

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    What does the second line of the first post in that thread say?

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    10
    Vote Rating
    0
    spire_extjs_admin is on a distinguished road

      0  

    Red face Export a gridview to excel not working in IE 7

    Export a gridview to excel not working in IE 7


    Thanks for your reply..

    In Mozilla browser when i am clicking on download button it's opening a pop-up window for download...

    But same thing when i am doing in Internet Explore, pop-up window is not coming. And Internet Explorer browser going in to hang Stage.

    But when i am clicking on download button in internet explorer then request is going to Export.js. But it's not returning pop-up window for download...

    One more point i want to clear..

    this functionality is working fine with firefox in both Linux and Windows.

    But in the case of Internet Explorer it's going in to hang stage. For IE, i am using Windows.

    Thanks in Advance..

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Listen to me.

    I repeat: What does the second line in the first post tell you about this plugin?

  5. #5
    Ext User
    Join Date
    Mar 2010
    Posts
    10
    Vote Rating
    0
    spire_extjs_admin is on a distinguished road

      0  

    Default


    Thanks animal...

    I got my ans in other forum...this functionality only works for ie8 and firefox.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by spire_extjs_admin View Post
    Thanks animal...

    I got my ans in other forum...
    The answer is right here in this forum. The thread FROM WHICH YOU GOT THAT ux starts by telling you that!

  7. #7
    Ext User
    Join Date
    Mar 2010
    Posts
    10
    Vote Rating
    0
    spire_extjs_admin is on a distinguished road

      0  

    Default


    Hey thanks...
    How i can make it work for other version of ie..

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well you can't can you? Other versions don't support data URLs.

  9. #9
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    The only cross-browser solution is to create the xls file on the server (e.g. using POI).

Similar Threads

  1. Export Tree into Excel
    By vladnech in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 22 Feb 2009, 7:59 PM
  2. export to Excel
    By FMIC_DEV in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 29 Jan 2008, 8:42 AM
  3. export excel
    By neenhouse in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 20 Dec 2007, 4:35 PM

Thread Participants: 2

Tags for this Thread