Saturday, November 3, 2012

Grid to Excel export plugin for ExtJS 4

ExtJS has an excellent component Grid Panel to display well structured data. The Grid component may be able to fulfill customer's requirements in most of the cases, but once customer need to do customized calculation on the grid, the may need to export the grid data to their favorite tool, for example, Microsoft Excel, for further process.

With some investigation on internet, this requirement actually existed for a long time, there are 2 main thread on sencha forum:
The discussions have been there for 3 years, but neither of the works well so far, either because of compatibility issues on Ext.JS 4 or bugs in them. I'm not going to discuss more about details, but summarized the 3 ways:
  1. Leverage document data location: set document URL to BASE64 encoded data like: data:application/vnd.ms-excel;base64,... 
    • Pros: pure JavaScript side, no dependency on any 3rd party tools or objects.
    • Cons: the download file cannot be customized, and there are some limitations on encoding UTF-8 to BASE64
  2. Send request to server and generate data stream with specified file format on server.
    • Pros: still pure JavaScript on client side, and developer can choose the file name.
    • Cons: need some work on server side, the code here made it works on JSP.
  3. Use flash Downloadify to generate a file on the fly.
    • Pros: No server side work, user can choose the file name just like a normal download.
    • Cons: depends on flash object.
My version of Ext.ux.Exporter  actually forked the version who use Downloadify, and fixed some defects to make it works on ExtJS 4.1.1a. Here is the code to use it:

  • include script files in html file:
<script type="text/javascript" src="/extjs/src/ux/exporter/swfobject.js"></script>
<script type="text/javascript" src="/extjs/src/ux/exporter/downloadify.min.js"></script>
  • in docedItems list of grid panel, generally on a toolbar, add an item as follows::
{
    xtype: 'exporterbutton'
}
In my implementation, I didn't take time to resolve the excel format issue, instead I use CSV format as default format. What I need is not to keep the exact style when load. I need further processing on data, and a CSV file can fulfill my requirements perfectly.

34 comments:

  1. thx. I have used it successfully. But I have an question: how to change the download image button. I tried to change 'downloadImage' , but it seems not work. Then I try to change the Button.js, result as above. Another question: 'this.getDownloadImage() ' in Button.js where defined it? I can not find it. Please help me .

    ReplyDelete
  2. Thank you! This worked perfectly

    ReplyDelete
  3. Hello, I have a problem if I try to add more than one button on the same window or project and does nothing.

    ReplyDelete
  4. Hi Mason. Thank you for the work, It works pretty good on Chrome and IE. I've been using the plugin like 3 months, yet got a few questions want to check with you.

    1. To show the check column or get rid of action column. I make some changes to the code to show true or false from the store instead of a mess of whole info for the image shown in the grid, but when I want to dig deeper like change to "X" or null in "Worksheet.js", it doesn't work, and I figure out that the "dateFormatString" in "Worksheet.js" doesn't change the time format as well, so I just modify the "Exporter.js" to show the whole store rather than the grid. Hope you may point a way out or give me some direction.

    2. Sometimes the image just disappears if you refresh the browser, and when you refresh again, you may notice the the position becomes white blank. I'm wondering whether you face the problem before or not. If you know the reason, plz let me know.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Is there a way to use the export functionality without the button?

    ReplyDelete
  7. hello Mason, this works for me in chrome but have issues in ie (v11) due to size of the url being too large (>2048) . so i keep hitting this wall "The data area passed to a system call is too small." any thoughts on a way to bypass this without a server side request?

    ReplyDelete
  8. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete
  9. I’d ought to speak to the following. That’s not merely one factor I do ! I really like reading through via a publish which can make folks think. Pest Control NJ

    ReplyDelete
  10. I havent any word to welcome this post.....Really i am inspired from this post....the individual who make this post it was an extraordinary human..thanks for imparted this to us.90s hip hop fashion

    ReplyDelete
  11. There are also instances when Thin From Within time is an important factor. There are people that resort to using these kinds of drugs when they're up against time. They also use this when they really want...funwirks.com

    ReplyDelete
  12. I think this is a better than average article. You make this data intriguing and locks in. You give perusers a ton to consider and I welcome that sort of composing.how much for tree removal

    ReplyDelete
  13. I suppose that is a genuinely permissible article. You create this steerage enticing and attractive. You control to pay for readers loads to assume kind of and that i recognize that fine of writing. Advanced Excel Training Mumbai

    ReplyDelete
  14. On the off chance that you can't print from your Brother printer since it is showing 'Printer Offline' message, then, at that point figure out How to Bring an Offline Brother Printer to Online or do a few changes to your printer's setting, and you will get your printer back on the web and you can keep on printing your reports once more. Brother printer DCP-T710w connect to laptop In case you're using brother printer offline fix windows 7.Then you can resolve the printer offline issue effectively as it has an underlying element for flipping between disconnected mode with the goal that you can get back your Brother printer on the web. Nonetheless, if your issue is as yet not settled 'How to turn sibling printer online' you may have to roll out some necessary improvements with your printer setup and establishment to reestablish ordinary printing usefulness back.

    ReplyDelete
  15. Wow, happy to see this awesome post. I hope this think help any newbie for their awesome work and by the way thanks for share this awesomeness, i thought this was a pretty interesting read when it comes to this topic. Thank you..
    Artificial Intelligence Course

    ReplyDelete
  16. I need to thank you for this very good read and i have bookmarked to check out new things from your post. Thank you very much for sharing such a useful article and will definitely saved and revisit your site.
    Data Science Course

    ReplyDelete
  17. Excellent Blog! I would like to thank you for the efforts you have made in writing this post. Gained lots of knowledge.
    Data Analytics Course

    ReplyDelete
  18. What an incredible message this is. Truly one of the best posts I have ever seen in my life. Wow, keep it up.
    AI Courses in Bangalore

    ReplyDelete
  19. Your site is truly cool and this is an extraordinary moving article and If it's not too much trouble share more like that. Thank You..
    Digital Marketing Course in Hyderabad

    ReplyDelete
  20. Awesome article. I enjoyed reading your articles. this can be really a good scan for me. wanting forward to reading new articles. maintain the nice work!
    Data Science Courses in Bangalore

    ReplyDelete
  21. Thank a lot. You have done excellent job. I enjoyed your blog . Nice efforts
    Data Science Certification in Hyderabad

    ReplyDelete
  22. I am sure it will help many people. Keep up the good work. It's very compelling and I enjoyed browsing the entire blog.
    Business Analytics Course in Bangalore

    ReplyDelete
  23. I bookmarked your website because this site contains valuable information. I am very satisfied with the quality and the presentation of the articles. Thank you so much for saving great things. I am very grateful for this site.

    Data Science Training in Bangalore

    ReplyDelete
  24. Wonderful blog found to be very impressive to come across such an awesome blog. I should really appreciate the blogger for the efforts they have put in to develop such amazing content for all the curious readers who are very keen on being updated across every corner. Ultimately, this is an awesome experience for the readers. Anyways, thanks a lot and keep sharing the content in the future too.

    Digital Marketing Training in Bangalore

    ReplyDelete
  25. I found Habit to be a transparent site, a social hub that is a conglomerate of buyers and sellers willing to offer digital advice online at a decent cost.

    Artificial Intelligence Training in Bangalore

    ReplyDelete
  26. Truly incredible blog found to be very impressive due to which the learners who go through it will try to explore themselves with the content to develop the skills to an extreme level. Eventually, thanking the blogger to come up with such phenomenal content. Hope you arrive with similar content in the future as well.

    Machine Learning Course in Bangalore

    ReplyDelete