1. #291
    Sencha User
    Join Date
    Feb 2014
    Location
    Quezon City, Philippines
    Posts
    96
    Vote Rating
    3
    arnoldvillasanta is on a distinguished road

      0  

    Default


    Hi Tajashwin,

    I resolved the issue of icon flickering.

    If you notice, the original icon has 4 repeated rectangular button designs... each one getting darker from 1 to 4. On mouse over, the icon was animated to show part 1 up to part 4.

    If you plan to replace the button, just make sure that you follow the dimension of the original one... plus make 4 repeated buttons. The height dimension is the most critical... and make sure that you divide it evenly by 4.



  2. #292
    Sencha User
    Join Date
    Feb 2014
    Location
    Quezon City, Philippines
    Posts
    96
    Vote Rating
    3
    arnoldvillasanta is on a distinguished road

      0  

    Default LIMITATIONS: Grouping based on Store's groupField

    LIMITATIONS: Grouping based on Store's groupField


    Thanks Steve for sharing the JScript solution at https://fiddle.sencha.com/#fiddle/17j.
    It works like a charm.

    Here are some issues I encountered so far:

    1. Group names always take the GROUPFIELD specified in the STORE. I have 5 more fields which have group capabilites. Even if I regroup the grid by using one of the 5, the xcel file always shows the one identified in the Store's Groupfield.

    2. I also tried to create the 5 functions as JS Utilities and tied it up with Download Button listener in the Controller (grid has itemID). I ran into some 'method call' issues and will work on it later. Please indicate guidelines/advice regarding this.

    Again, thanks for sharing.
    Last edited by arnoldvillasanta; 22 Apr 2014 at 2:15 AM. Reason: Some item are not related to the xCEL JScript

  3. #293
    Sencha User
    Join Date
    Feb 2014
    Location
    Quezon City, Philippines
    Posts
    96
    Vote Rating
    3
    arnoldvillasanta is on a distinguished road

      0  

    Default FIXED: Groupings based on Grid Group Selection rather than Store's groupField.

    FIXED: Groupings based on Grid Group Selection rather than Store's groupField.


    Hi Steve,
    I’ve created some changes in the createWorksheet().
    The changes enables the function to look into the Grid’s grouping at runtime, rather than referencing the Store’s groupfield. (I usedstore.groupers.first().property).
    I also created 2 variables, groupPreLabel and groupLabel to replace the Store’s group template (groupTpl) at some point.

    Here is the complete createWorksheet() code:


    Code:
        // Calculate cell data types and extra class names which affect formatting
            var cellType = [];
            var cellTypeClass = [];
            var cm = this.columns;
    
    
            var totalWidthInPixels = 0;
            var colXml = '';
            var headerXml = '';
            var visibleColumnCountReduction = 0;
            var colCount = cm.length;
    
    
            // Arnold - for Group Label correction (1)
            var groupPreLabel = ''; 
            var groupLabel = '';
            // -end (1
    
    
            for (var i = 0; i < colCount; i++) {
    
    
               //Arnold - for Group Label correction (2)
                    if (!Ext.isEmpty(this.store.groupers.first())) {
                        if (this.store.groupers.first().property == cm[i].dataIndex) {
                            groupPreLabel = cm[i].text + ":  ";
                            console.log('Group Pre Label = ' + cm[i].text);
                        }
                    }
               // - end (2)
                
                if (cm[i].xtype != 'actioncolumn' && (cm[i].dataIndex !== '') && (includeHidden || !cm[i].hidden)) {
                    var w = cm[i].getEl().getWidth();
                    totalWidthInPixels += w;
    
    
                    if (cm[i].text === "") {
                        cellType.push("None");
                        cellTypeClass.push("");
                        ++visibleColumnCountReduction;
                    } else {
                        colXml += '<Column ss:AutoFitWidth="1" ss:Width="' + w + '" />';
                        headerXml += '<Cell ss:StyleID="headercell">' +
                            '<Data ss:Type="String">' + cm[i].text + '</Data>' +
                            '<NamedCell ss:Name="Print_Titles"></NamedCell></Cell>';
    
    
    
    
                        var fld = this.getModelField(cm[i].dataIndex);
                        switch (fld.type.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.
    
    
            // determine number of rows
            var numGridRows = this.store.getCount() + 2;
            
            //Arnold - for Group Label correction (3)
            //if (!Ext.isEmpty(this.store.groupField)) {
            if (!Ext.isEmpty(this.store.groupers.first())) {
            // end (3)    
                numGridRows = numGridRows + this.store.getGroups().length;
            }
    
    
            // create header for worksheet
            var t = ''.concat(
                '<Worksheet ss:Name="' + theTitle + '">',
    
    
                '<Names>',
                '<NamedRange ss:Name="Print_Titles" ss:RefersTo="=\'' + theTitle + '\'!R1:R2">',
                '</NamedRange></Names>',
    
    
                '<Table ss:ExpandedColumnCount="' + (visibleColumnCount + 2),
                '" ss:ExpandedRowCount="' + numGridRows + '" x:FullColumns="1" x:FullRows="1" ss:DefaultColumnWidth="65" ss:DefaultRowHeight="15">',
                colXml,
                '<Row ss:Height="38">',
                '<Cell ss:MergeAcross="' + (visibleColumnCount - 1) + '" ss:StyleID="title">',
                '<Data ss:Type="String" xmlns:html="http://www.w3.org/TR/REC-html40">',
                '<html:b>' + theTitle + '</html:b></Data><NamedCell ss:Name="Print_Titles">',
                '</NamedCell></Cell>',
                '</Row>',
                '<Row ss:AutoFitHeight="1">',
                headerXml +
                '</Row>'
            );
    
    
            // Generate the data rows from the data in the Store
            var groupVal = "";
            
            for (var i = 0, it = this.store.data.items, l = it.length; i < l; i++) {
                
                //Arnold - for Group Label correction (4)
                //if (!Ext.isEmpty(this.store.groupField)) {
                if (!Ext.isEmpty(this.store.groupers.first())) {
                    
                    //if (groupVal != this.store.getAt(i).get(this.store.groupField)) {
                    //    groupVal = this.store.getAt(i).get(this.store.groupField);
                    if (groupVal != this.store.getAt(i).get(this.store.groupers.first().property)) {
                        groupVal = this.store.getAt(i).get(this.store.groupers.first().property);
    
    
                        //t += this.generateEmptyGroupRow(this.store.groupField, groupVal, cellType, includeHidden);
                        groupLabel = groupPreLabel + groupVal;
                        console.log('Group Label = ' + groupLabel);
                        t += this.generateEmptyGroupRow(this.store.groupers.first().property, groupLabel, cellType, includeHidden);
                //end (4)
                    }
                }
                t += '<Row>';
                var cellClass = (i & 1) ? 'odd' : 'even';
                r = it[i].data;
                var k = 0;
                for (var j = 0; j < colCount; j++) {
                    if (cm[j].xtype != 'actioncolumn' && (cm[j].dataIndex !== '') && (includeHidden || !cm[j].hidden)) {
                        var v = r[cm[j].dataIndex];
                        if (cellType[k] !== "None") {
                            t += '<Cell ss:StyleID="' + cellClass + cellTypeClass[k] + '"><Data ss:Type="' + cellType[k] + '">';
                            if (cellType[k] == 'DateTime') {
                                t += Ext.Date.format(v, 'Y-m-d');
                            } else {
                                t += v;
                            }
                            t += '</Data></Cell>';
                        }
                        k++;
                    }
                }
                t += '</Row>';
            }
    
    
            result.xml = t.concat(
                '</Table>',
                '<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">',
                '<PageLayoutZoom>0</PageLayoutZoom>',
                '<Selected/>',
                '<Panes>',
                '<Pane>',
                '<Number>3</Number>',
                '<ActiveRow>2</ActiveRow>',
                '</Pane>',
                '</Panes>',
                '<ProtectObjects>False</ProtectObjects>',
                '<ProtectScenarios>False</ProtectScenarios>',
                '</WorksheetOptions>',
                '</Worksheet>'
            );
            return result;
    Last edited by arnoldvillasanta; 22 Apr 2014 at 2:58 AM. Reason: correction in code.

  4. #294
    Sencha User
    Join Date
    Oct 2013
    Posts
    7
    Vote Rating
    0
    suvo is on a distinguished road

      0  

    Default Thanks for your help

    Thanks for your help


    Quote Originally Posted by rdominelli View Post
    The attached replacement for Style.js seems to do the trick. Place this (after backing up the original) in exporter\excelFormatter

    I still get a warning opening the file in excel, but it will open it correctly now.

    Rich
    Thanks a lot for this Style.js file, I got the Export Excel functionality done but the formatting was an issue and was not working.
    Really appreciate your help.

  5. #295
    Sencha - Training Team
    Join Date
    Nov 2009
    Location
    Washington, DC
    Posts
    62
    Vote Rating
    2
    sdruckerfig is on a distinguished road

      0  

    Default


    Yeah, I've been updating the codebase on my blog periodically at:

    http://druckit.wordpress.com/2013/10...ext-js-4-grid/

    (Now supports Internet Exploder)

    I've also now got a version that works with TreeStore:

    http://druckit.wordpress.com/2014/04...nel-tree-grid/

  6. #296
    Sencha User
    Join Date
    Oct 2013
    Posts
    7
    Vote Rating
    0
    suvo is on a distinguished road

      0  

    Default


    Hi, I have successfully implemented the Export of Excel from grid using Exporter with downloadify. But I want to avoid using yet another 3rd party plugin...i.e. I dont want to use downloadify. can anyone of you suggest what might be an alternative to using this.You can visit my blog for details about implementation.


    anarki0608.wordpress.com/2014/05/09/exporting-excel-and-pdf-files-from-extjs-grid/

  7. #297
    Sencha User
    Join Date
    Feb 2014
    Location
    Quezon City, Philippines
    Posts
    96
    Vote Rating
    3
    arnoldvillasanta is on a distinguished road

      0  

    Default PHP version for the download callback

    PHP version for the download callback


    For those using Steve's excel export code (http://druckit.wordpress.com/2013/10...t-js-4-grid/):

    1. Note that Chrome/gecko/safari's DOWNLOAD command will fail at around 2MB excel export (local download script will snap). I forced the Chrome's IF condition to false so that the downloadExcelXML will always do a remote download. Remote download works at 2.8MB data, which is the max. of my testcase.

    2. I created a PHP-version of the remote downloader as follows (for those who needs it):

    Code:
    <?php
        header("Content-Description: File Transfer");
    
    
        if(isset($_GET['filename'])) {
            $filename = $_GET['filename'];
            header("Content-Disposition: attachment; filename=$filename");
        } 
    
    
        if(isset($_GET['mimetype'])) {
            $mimetype = $_GET['mimetype'];
            header("Content-Type: $mimetype");
        } 
    
    
        if(form.data) {
            $excelData = $_POST["data"];
                echo $excelData;
        } 
    ?>
    So far, Steve's approach serves me well (with some changes I made and posted in his site)
    Last edited by arnoldvillasanta; 12 May 2014 at 1:48 AM. Reason: update code

  8. #298
    Sencha User il Sergio's Avatar
    Join Date
    Oct 2008
    Location
    Italy
    Posts
    32
    Vote Rating
    0
    il Sergio is on a distinguished road

      0  

    Default error ReferenceError: swfobject is not defined

    error ReferenceError: swfobject is not defined


    Hi guy,
    i try to use export plugin, but i have this error on my FF console:

    ReferenceError: swfobject is not defined
    http://localhost:8080/PERAR-Portlets...loadify.min.js
    Line 3

    EXTS verison 4.2

    MY HTML:
    <!-- INCLUDE -->
    <script src="<c:url value="/extjs/ux/exporter/downloadify.min.js"></c:url>"></script>

    in myapp

    paths: {
    'Ext.ux': '/PERAR-Portlets/extjs/ux'
    },
    requires: [
    'Ext.ux.exporter.Exporter'
    ],

    i have a folder in UX.EXPORTER with all file downloaded inside zip
    csvFormatter --> folder
    excelFormatter --> folder
    Base64 --> js
    Button --> js
    downloadify.min --> js
    Exporter --> js
    Formatter --> js
    downloadify --> swf
    download --> png

    in MY GRID

    {
    xtype: "exporterbutton",
    swfPath: '/extjs/ux/exporter/downloadify.swf', // this file is included
    downloadImage: '/images/ext_reports/download.png', // this one too
    width: 62, // mantain the width and height
    height: 22,
    downloadName: "download", // this is the name of the file
    formatter: "excel" // Or "csv"
    }

    UPDATE:

    my grid is a INFINITE LIVE SEARCH example grid
    il Sergio - UomoRagno Mod Club

  9. #299
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    felix822 is on a distinguished road

      0  

    Default


    I think you need to download the swfobject.js file separately - https://code.google.com/p/swfobject/


    Quote Originally Posted by il Sergio View Post
    Hi guy,
    i try to use export plugin, but i have this error on my FF console:

    ReferenceError: swfobject is not defined
    http://localhost:8080/PERAR-Portlets...loadify.min.js
    Line 3

    EXTS verison 4.2

    MY HTML:
    <!-- INCLUDE -->
    <script src="<c:url value="/extjs/ux/exporter/downloadify.min.js"></c:url>"></script>

    in myapp

    paths: {
    'Ext.ux': '/PERAR-Portlets/extjs/ux'
    },
    requires: [
    'Ext.ux.exporter.Exporter'
    ],

    i have a folder in UX.EXPORTER with all file downloaded inside zip
    csvFormatter --> folder
    excelFormatter --> folder
    Base64 --> js
    Button --> js
    downloadify.min --> js
    Exporter --> js
    Formatter --> js
    downloadify --> swf
    download --> png

    in MY GRID

    {
    xtype: "exporterbutton",
    swfPath: '/extjs/ux/exporter/downloadify.swf', // this file is included
    downloadImage: '/images/ext_reports/download.png', // this one too
    width: 62, // mantain the width and height
    height: 22,
    downloadName: "download", // this is the name of the file
    formatter: "excel" // Or "csv"
    }

    UPDATE:

    my grid is a INFINITE LIVE SEARCH example grid

  10. #300
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    felix822 is on a distinguished road

      0  

    Default


    How do I get this to work with a Chart data store?

Thread Participants: 117

  1. dawesi (1 Post)
  2. feiji1983 (1 Post)
  3. isaac (1 Post)
  4. radtad (4 Posts)
  5. austin1030 (1 Post)
  6. pavanextjs (5 Posts)
  7. aragm (1 Post)
  8. terjeio (1 Post)
  9. il Sergio (2 Posts)
  10. edspencer (1 Post)
  11. nitingautam (2 Posts)
  12. edykstra (3 Posts)
  13. kalchas (4 Posts)
  14. pardha (1 Post)
  15. shelly (1 Post)
  16. talha06 (3 Posts)
  17. vaucer (1 Post)
  18. SMMJ_Dev (7 Posts)
  19. Ekambos (1 Post)
  20. vispiron (1 Post)
  21. sdruckerfig (4 Posts)
  22. jwcraig (1 Post)
  23. dbrin (1 Post)
  24. scaddenp (2 Posts)
  25. grisevich (1 Post)
  26. semialcruz (3 Posts)
  27. krishnarn1 (1 Post)
  28. mikih (1 Post)
  29. Teemac (3 Posts)
  30. jpcoppol (1 Post)
  31. ssuarez (4 Posts)
  32. trinitrotoluen (1 Post)
  33. aladdina (1 Post)
  34. Mental (3 Posts)
  35. nuskin (5 Posts)
  36. droessner (5 Posts)
  37. HIG (1 Post)
  38. jjerome (4 Posts)
  39. bee (2 Posts)
  40. RAD001 (8 Posts)
  41. RNL (1 Post)
  42. shawon (4 Posts)
  43. parkcity (4 Posts)
  44. carlosgoias (1 Post)
  45. Ewoq (7 Posts)
  46. skotamreddy (1 Post)
  47. another_i (5 Posts)
  48. neerajbherwal (1 Post)
  49. nimda13 (2 Posts)
  50. acteon (2 Posts)
  51. ma1986 (2 Posts)
  52. pierrocknroll (1 Post)
  53. Aranair (7 Posts)
  54. clarkbanks (1 Post)
  55. linyajun (1 Post)
  56. delusion (2 Posts)
  57. Jay Tanwar (2 Posts)
  58. supermarcos (6 Posts)
  59. mmuzamil (1 Post)
  60. amishra06 (1 Post)
  61. hundare (1 Post)
  62. Ecthelion (1 Post)
  63. balajivaikar (2 Posts)
  64. jarobi (1 Post)
  65. ferchotipin (2 Posts)
  66. sebas2515 (3 Posts)
  67. arpeggian (3 Posts)
  68. a_kanin (1 Post)
  69. MeDigital (1 Post)
  70. Vasanthoo7 (3 Posts)
  71. jeora (1 Post)
  72. BlackLine (1 Post)
  73. mrhomer (7 Posts)
  74. KostasP (2 Posts)
  75. rdominelli (4 Posts)
  76. pksiv (1 Post)
  77. yoisen (2 Posts)
  78. opms (1 Post)
  79. Oxii (1 Post)
  80. sarz (6 Posts)
  81. gabsoftware (3 Posts)
  82. 9josh (1 Post)
  83. ananthk (2 Posts)
  84. psnprasad (1 Post)
  85. alex9311 (2 Posts)
  86. Pedro2263 (1 Post)
  87. felix822 (2 Posts)
  88. mpasacrita@escholar.com (1 Post)
  89. Garry Hawkins (1 Post)
  90. jesus.balles (1 Post)
  91. chandrima31 (1 Post)
  92. this-is-sparta (1 Post)
  93. vitalz (7 Posts)
  94. Sheng_Yunzhou (2 Posts)
  95. xdengli (1 Post)
  96. sgscontact (1 Post)
  97. nitingogia@gmail.com (1 Post)
  98. Swetosuvro (1 Post)
  99. sudrak (1 Post)
  100. cdmein (1 Post)
  101. code4jhon (1 Post)
  102. felixfang (2 Posts)
  103. jayasingh1802 (2 Posts)
  104. abdul haq (3 Posts)
  105. luatbravo (1 Post)
  106. gilmaredo@gmail.com (1 Post)
  107. ricardo.lourival (1 Post)
  108. Sundarganesh Ramar (1 Post)
  109. madhavan281981 (1 Post)
  110. suvo (3 Posts)
  111. shankar8rajah1 (1 Post)
  112. benny_GI (1 Post)
  113. cojocarutudor (1 Post)
  114. arnoldvillasanta (4 Posts)
  115. tajashwin (1 Post)
  116. mangeshppatil (2 Posts)
  117. mukhriddin (1 Post)