1. #21
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by sanjshah View Post
    Hi,

    I'm testing this but getting an error message:

    PHP Code:
    unterminated string constant 
    Any help? please!
    Surely you can provide more details than that, firebug will report more information than that if the error is coming from firebug.

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

      0  

    Default


    Quote Originally Posted by sanjshah View Post
    Hi,

    I'm testing this but getting an error message:

    PHP Code:
    unterminated string constant 
    Any help? please!
    It's creating quoted strings. There's probably some data in there which contains quotes. Break on that error in Firebug and fix it.

  3. #23
    Ext User
    Join Date
    Jul 2007
    Location
    Taiwan
    Posts
    24
    Vote Rating
    0
    kevinwu8 is on a distinguished road

      0  

    Default


    Dear Animal...

    I create a grid via Ext.extend ,and use Ext.reg to register a xtype for this grid...
    This extend grid have all of add,edit,delete function...
    Now i wish can add export excel function to this extend grid...
    Can you provide a example that integrate export grid to excel function...

    Thx..

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

      0  

    Default


    Quote Originally Posted by kevinwu8 View Post
    Dear Animal...

    I create a grid via Ext.extend ,and use Ext.reg to register a xtype for this grid...
    This extend grid have all of add,edit,delete function...
    Now i wish can add export excel function to this extend grid...
    Can you provide a example that integrate export grid to excel function...

    Thx..
    http://extjs.com/forum/showthread.ph...522#post152522

  5. #25
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    213
    Vote Rating
    0
    sanjshah is on a distinguished road

      0  

    Default


    Thanks Animal,

    Found the error - it was with copying and pasting the code - seems a line is not wrapped correctly, any all OK now thanks again!

    Quote Originally Posted by Animal View Post
    It's creating quoted strings. There's probably some data in there which contains quotes. Break on that error in Firebug and fix it.

  6. #26
    Ext User
    Join Date
    Apr 2008
    Posts
    18
    Vote Rating
    0
    DamienValentine is on a distinguished road

      0  

    Default Bug when RowNumberer is used

    Bug when RowNumberer is used


    In the "//Calculate cell data types and extra class names which affect formatting" section you have to change i value in a loop like this:
    Code:
    for (var i = 1; i < cm.getColumnCount(); i++) {
    :to avoid fld has no properties error. If you start with i=0 then your RowNumberer will be recognized as field.
    There is other way to prevent this, but all my grids have such a field so I decided to change the i initial value.

  7. #27
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    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!
    Noah
    Senior Web Developer
    NBA.com

  8. #28
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Quote Originally Posted by NoahK17 View Post
    Tagging for later use. Thanks Animal!
    use Thread Tools->subscribe

  9. #29
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    So in order for this to print out just what you see on the screen (after column resorting/hiding/editing of values), you would need to call the Base64 function, and overwrite the button's A HREF tag after each column change?
    Noah
    Senior Web Developer
    NBA.com

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

      0  

    Default


    Yes, the URL referenced by the href actually is the spreadsheet, so it should be recalculated on every change of the Store.

Thread Participants: 140

  1. alexb (1 Post)
  2. galdaka (3 Posts)
  3. ghyster (1 Post)
  4. Condor (1 Post)
  5. TopKatz (1 Post)
  6. Jul (1 Post)
  7. mystix (3 Posts)
  8. Foggy (2 Posts)
  9. bloon (1 Post)
  10. fshort (1 Post)
  11. antimatter15 (1 Post)
  12. cocinerox (1 Post)
  13. tobiu (1 Post)
  14. ajaxE (2 Posts)
  15. andreyz (1 Post)
  16. devnull (4 Posts)
  17. mjlecomte (4 Posts)
  18. kevinwu8 (1 Post)
  19. rakesh (1 Post)
  20. hendricd (2 Posts)
  21. gelleneu (1 Post)
  22. isaac (1 Post)
  23. huling (1 Post)
  24. ckr (1 Post)
  25. roopa (1 Post)
  26. loveyeah (1 Post)
  27. zhfxu_cs (1 Post)
  28. Mthor (1 Post)
  29. johnlicy (1 Post)
  30. thoreking (2 Posts)
  31. csqjean (1 Post)
  32. mankz (1 Post)
  33. vietschv (1 Post)
  34. verbi (1 Post)
  35. sanjshah (2 Posts)
  36. mask_hot (1 Post)
  37. calavera (1 Post)
  38. vsmike (1 Post)
  39. vizcano (1 Post)
  40. lakehouse (1 Post)
  41. alaska (2 Posts)
  42. radtad (3 Posts)
  43. jmcneese (1 Post)
  44. Rafael (4 Posts)
  45. calvouze (1 Post)
  46. Joyfulbob (1 Post)
  47. angeldimitrov (2 Posts)
  48. Jack_S (2 Posts)
  49. g13013 (2 Posts)
  50. DamienValentine (5 Posts)
  51. Marcelo Delgado (1 Post)
  52. NoahK17 (8 Posts)
  53. anujg (1 Post)
  54. aproust94 (3 Posts)
  55. pokerking400 (1 Post)
  56. Ronhead (1 Post)
  57. krzak (3 Posts)
  58. cvieira (1 Post)
  59. Efex (5 Posts)
  60. gthe (2 Posts)
  61. miihiir (2 Posts)
  62. pops (1 Post)
  63. emredagli (12 Posts)
  64. larsa (2 Posts)
  65. maggiesnyder (3 Posts)
  66. sam.zhang (1 Post)
  67. kristalgic (1 Post)
  68. wiznia (3 Posts)
  69. frpucci (1 Post)
  70. tinakonda (1 Post)
  71. tBSTAR (1 Post)
  72. tdg2008 (1 Post)
  73. iwagon (1 Post)
  74. psarunkumar (1 Post)
  75. kimmking (1 Post)
  76. sKuD24 (1 Post)
  77. MartinL (2 Posts)
  78. BitPoet (2 Posts)
  79. snoir (3 Posts)
  80. naranda (1 Post)
  81. zhw511006 (1 Post)
  82. bobjbain (1 Post)
  83. korto (1 Post)
  84. wp.joju (1 Post)
  85. hastiok (6 Posts)
  86. dtondo (4 Posts)
  87. Dumas (1 Post)
  88. vvreddy@12 (4 Posts)
  89. TheBim (1 Post)
  90. whodat (2 Posts)
  91. Skunkerbr (2 Posts)
  92. stevenhzj (4 Posts)
  93. Naokai (1 Post)
  94. wayned@escc (2 Posts)
  95. MuadDib-DK (1 Post)
  96. jsundquist (1 Post)
  97. hardc0re (2 Posts)
  98. hzwei (4 Posts)
  99. Galileo_Galilei (1 Post)
  100. SantaBarbarian (4 Posts)
  101. stevieke (1 Post)
  102. megmefleg (1 Post)
  103. Boccara Jonathan (1 Post)
  104. Surinder singh (2 Posts)
  105. KrullWarKing (1 Post)
  106. brandnewdrew (1 Post)
  107. MrRoyce (1 Post)
  108. Spongerusher (1 Post)
  109. teraphy (2 Posts)
  110. Pekka Karalahti (3 Posts)
  111. Sergii (1 Post)
  112. Cassio11 (1 Post)
  113. myth (1 Post)
  114. spor (6 Posts)
  115. StagnantIce (2 Posts)
  116. shailendra (2 Posts)
  117. ext_user1 (1 Post)
  118. kenny_mk (1 Post)
  119. mpacheco (1 Post)
  120. Centurus (1 Post)
  121. andyfly (1 Post)
  122. darmandovargas@gmail.com (1 Post)
  123. zjuthhy (3 Posts)
  124. robshim (3 Posts)
  125. Tod (1 Post)
  126. bipen (2 Posts)
  127. alisyah (1 Post)
  128. Monz87 (1 Post)
  129. alssst (1 Post)
  130. aggie (1 Post)
  131. bradelsky (1 Post)
  132. lagrezd (1 Post)
  133. ma1986 (1 Post)
  134. Sabareesh (2 Posts)
  135. top_1 (1 Post)
  136. Vasanthoo7 (1 Post)
  137. garrek99 (2 Posts)
  138. opik (1 Post)
  139. shankar8rajah1 (1 Post)
  140. tdobberphul (4 Posts)