1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default Export store to Excel

    Export store to Excel


    Well, here's an exporter that can export a grid, tree or simply a store to excel. It's a fork from another project, I adapted it to work with ExtJs 4, using the new class system and fixed a couple of bugs.
    The Csv exporter isn't implemented and the example and compiled files are not updated (so don't use Exporter-all.js).
    It exports all the data in the store loaded at that time. If a grid is used it uses the renderers and column configurations from it.
    The download is made through a button and uses datauri, so it doesn't work in older ie versions.
    I hope it's useful, if you find bugs or make improvements, just fork it and send me a pull request.
    https://github.com/iwiznia/Ext.ux.Exporter

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,082
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    nice work. I'll check it out this weekend! :-)
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    15
    Vote Rating
    0
    nuskin is on a distinguished road

      0  

    Default


    I did not use the Exporter-all.js file as the author suggested but included all other files:
    <script type="text/javascript" src="Base64.js"></script>
    <script type="text/javascript" src="Button.js"></script>
    <script type="text/javascript" src="Formatter.js"></script>
    <script type="text/javascript" src="./excelFormatter/ExcelFormatter.js"></script>
    <script type="text/javascript" src="./excelFormatter/Workbook.js"></script>
    <script type="text/javascript" src="./excelFormatter/Worksheet.js"></script>
    <script type="text/javascript" src="./excelFormatter/Cell.js"></script>
    <script type="text/javascript" src="./excelFormatter/Style.js"></script>
    <script type="text/javascript" src="Exporter.js"></script>

    However, I got the namspace undefined error when loading:
    namespace is undefined

    if (namespace === from...substring(0, from.length) === from) { ext-all-debug.js (line 3487)

    Any idea?

  4. #4
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default


    You don't have to include all the files if you have the ext loader activated. It uses the new class method and defines it's dependencies. You only have to include Exporter.js

  5. #5
    Sencha User vaucer's Avatar
    Join Date
    Aug 2009
    Location
    Paris
    Posts
    50
    Vote Rating
    0
    vaucer is on a distinguished road

      0  

    Default


    Hello,

    It does not work for me on ext4.

    I just add the script in my index:

    Code:
    <script type="text/javascript" src="app/lib/Exporter-all.js">
    And add the button to my grid:

    Code:
    dockedItems:[{
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [{
                        text: 'Nouveau ticket',
                                            iconCls:'addticket',
                        action: 'newticket'
                    },{
                        text: 'Prendre en charge',
                                            iconCls:'linkticket',
                        action: 'chrg',
                                            hidden:true
                    },{
                                            iconCls: 'summary',
                                            text: 'Aper├žu',
                                            enableToggle: true,
                                            pressed: true,
                                            scope: this,
                                            toggleHandler: this.onSummaryToggle
                                    },'->',{
                        text: 'Archiver',
                                            iconCls:'datab',
                        action: 'archi'
                    },new Ext.ux.Exporter.Button({
                          component: this,
                          text     : "Download as .xls"
                      })]
                }],
    I get Ext.ux.Exporter is undefined

    Thx in advance for your help
    Vaucer

  6. #6
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default


    The exporter-all.js is not updated, so you have to include Exporter.js

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    Teemac is on a distinguished road

      0  

    Default


    Ran into the same problem as nuskin, but happened for me when I tried just including Exporter.js, when I included all the files, I was able actually get into the button class when adding the button but not sure what I need to set in the buttons config to get it to work. Tried the storeId, tried the store itself, and even tried the grid as the component. Any ideas?

  8. #8
    Sencha User
    Join Date
    Jun 2008
    Posts
    157
    Vote Rating
    0
    wiznia is on a distinguished road

      0  

    Default


    I use it like this. If the exporterebutton is inside a grid or a tree it autodetects the store. You can use it in a grid without creating a new class, just add the 'uses' config and the exporterbutton in the dockedItems.

    Code:
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '/path-to-ext-ux');
    
    Ext.define('App.view.SomeGrid', {
        extend: 'Ext.grid.Panel',
        uses: [
            'Ext.ux.exporter.Exporter'
        ],
    
        initComponent: function() {
            this.store = "SomeStore";
    
            this.dockedItems = [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    xtype: 'exporterbutton'
                }];
            this.columns = [/* YOUR COLUMNS */];
            this.callParent(arguments);
        }
    });

  9. #9
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Vote Rating
    0
    Teemac is on a distinguished road

      0  

    Default


    Thanks that worked except that in the button class setComponent function the columns don't have the .on function off them, seem like a simple array. Also the show and hide events never seemed to get fired. So I set it on the render and used the headerCt instead of columns, which seems to work but when I actually click the download, it navigates to data:application/vnd.ms-excel;base64,PD94bWwgdm....Lots more just like it, but doens't do anything more. As I haven't tried to use the data stuff before not sure what's it's supposed to do. I'm trying to make a simpler version of my grid to show as an example and see if it works, but wanted to see if you had ideas ahead of time, thanks again for any help you can provide.

    Code:
    Ext.Array.each(
     
    
    
    this.component.headerCt.items.items, function(col) {
    
                    col.on(
     
    
    
    "render", setLink, me);
    
                });
    
    
    

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    7
    Vote Rating
    0
    Ewoq is on a distinguished road

      0  

    Default


    Hi all

    I have the same problem as teemac, I think.

    I get the same result from my app, as I get from the exporter example. When I click the button in both the example and my app, I get a part file from firefox and this only contains some column information plus some other values that doesn't appear in the grid.

    I'm using the Exporter.js in my app, so that should be okay.

    I made a small change to the Worksheet.js after line 150:
    Code:
    if(record.fields.get(name)) {
                    var value = record.get(name),
                        type  = this.typeMappings[col.type || record.fields.get(name).type.type];
                }
    I changed it because I have an empty column that it didn't like. But I don't think that is a problem.

    Any suggestions?

Thread Participants: 112

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