Page 30 of 30 FirstFirst ... 20282930
Results 291 to 297 of 297

Thread: GridPanel directly to Excel.

  1. #291
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    1
      0  

    Default

    I was not able to test it so far, but I think this code will work:
    Code:
    //      Generate the data rows from the data in the Store
            var treeAsArray = new Array();
            this.store.getRootNode().cascadeBy(
                function(node){
                    if (node.get('id') !== 'root') treeAsArray.push(node);
                },
                this
            );        
            
            for (var i = 0, it = treeAsArray, l = it.length; i < l; i++) {
    ...

  2. #292
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    1
      0  

    Default

    But perhaps someone can help me with the LinkButton. It doesn't work for me:
    Code:
    Ext.define('IGP_Office.view.LinkCSVButton', {
        extend: 'Ext.button.Button',
        alias: 'widget.linkCSVButton',
    
    
        icon: 'resources/icons/csv.png',
        text: 'CSV export',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                listeners: {
                    click: {
                        fn: me.onButtonClick,
                        scope: me
                    },
                    render: {
                        fn: me.onButtonRender,
                        scope: me
                    }
                }
            });
    
    
            me.processLinkCSVButton(me);
            me.callParent(arguments);
        },
    
    
        processLinkCSVButton: function(config) {
            config.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>');
            return config;
        },
    
    
        onButtonClick: function(button, e, eOpts) {
            if (e.button != 0) {
                return;
            }
            if (!this.disabled) {
                this.fireEvent("click", this, e);
                if (this.handler) {
                    this.handler.call(this.scope || this, this, e);
                }
            }
        },
    
    
        onButtonRender: function(component, eOpts) {
            var btn, targs = [this.text || ' ', this.href, this.target || "_self"];
            if (eOpts) {
                btn = this.template.insertBefore(eOpts, targs, true);
            } else {
                btn = this.template.append(component, 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);
        }
    
    
    });
    The line
    Code:
    btn = this.template.insertBefore(...
    throws an error, because this.template is undefined.

    Thanks a lot.

    Tobias

  3. #293
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    54
    Vote Rating
    1
      0  

    Default

    You can add this part of code to the override. Then you can simply call downloadExcelXml() in a button-handler to name the file and get a link - button:
    Code:
    downloadExcelXml: function(includeHidden, title) {
    
    
            var vExportContent = this.getExcelXml(includeHidden, title);
    
    
            var location = 'data:application/vnd.msexcel;base64,' + Base64.encode(vExportContent);
    
    
            if (!title) title = this.title;
    
    
            /* 
              dynamically create and anchor tag to force download with suggested filename 
              note: download attribute is Google Chrome specific
            */
            var gridEl = this.getEl();
    
    
            var el = Ext.DomHelper.append(gridEl, {
                tag: "a",
                download: title + "-" + Ext.Date.format(new Date(), 'Y-m-d H i') + '.xls',
                href: location
            });
    
    
            el.click();
    
    
            Ext.fly(el).destroy();
        },

  4. #294
    Sencha User
    Join Date
    Sep 2013
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Good work!

  5. #295
    Sencha User
    Join Date
    Oct 2014
    Posts
    1
    Vote Rating
    0
      0  

    Default

    I was wondering where do you create the file name for the export and is it possible to change it?

  6. #296
    Sencha Premium Member
    Join Date
    Apr 2015
    Posts
    15
    Vote Rating
    0
      0  

    Default

    Has anyone had issues opening the excel file with IE11? Chrome works fine, but in IE the URL opens in a new tab but I am not given an option to download. I do not have access to "My Computer" to change the "Browse in same window" options. Any other options?

  7. #297
    Sencha User
    Join Date
    Mar 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default

    I've tried this Noah,
    but there is an error "base64 undefined"
    what should I do ?

    Quote Originally Posted by NoahK17 View Post
    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:
    Code:
    /**
     * 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.
    Code:
    <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:

    Code:
                    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!

Page 30 of 30 FirstFirst ... 20282930

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •