1. #1
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      3  

    Post ExtJS 4: Grid Printer Plugin

    ExtJS 4: Grid Printer Plugin


    Hi,

    I ported GridPrinter plugin to ExtJS 4.
    This plugin was originally written by Ed Spencer.

    Code: https://github.com/loiane/extjs4-ux-gridprinter
    Demo: http://loianegroner.com/extjs/exampl...x-gridprinter/
    Blog post: http://loianegroner.com/2011/09/extj...printer-plugin
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  2. #2
    Sencha User crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    This is great, I was planing on porting this plugin to ext4 but you did it!

    Thanks for share.

  3. #3
    Sencha User
    Join Date
    Nov 2007
    Posts
    31
    Vote Rating
    0
    zacware is on a distinguished road

      0  

    Default


    Thank you! Really missed having this.

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Posts
    107
    Vote Rating
    0
    foxmarco is on a distinguished road

      0  

    Default


    but in case of paging?

  5. #5
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Quote Originally Posted by foxmarco View Post
    but in case of paging?
    The plugin will only print what the grid is displaying at the time.
    To print all the records, you have to change the plugin and load all the records into the store, or you can create a server side solution.
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  6. #6
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    12
    hschaefer123 will become famous soon enough

      0  

    Default Adding Ext.grid.column.Template support

    Adding Ext.grid.column.Template support


    Hi Loiane,
    thanks for the migration.

    I like to see that the code quality of migrated extensions is getting better and better and Ext 4 has the possibility to produce same quality with less code ;-)

    Currently Grid Printer does not support TemplateColumns -> XTemplate Exception.

    I added support this way

    Code:
                        Ext.each(columns, function(column) {
                            if (column.dataIndex == key) {
                                // template column support
                                if (column instanceof Ext.grid.column.Template) {
                                    convertedData[key] = column.tpl.apply(item.data);                            
                                } else {
                                    convertedData[key] = column.renderer ? column.renderer(value) : value;
                                }
                            }
                        }, this);
    Cheers Holger

  7. #7
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      0  

    Default


    Thanks!

    I will update the plugin code with these new fixes!
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    parkcity is on a distinguished road

      0  

    Default


    I am using chrome and the code doesn't print automatically. In chrome I get the notification.."Print Preview failed". The code works fine when printAutomatically is set to false.

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    15
    Vote Rating
    0
    mfruizs2 is on a distinguished road

      0  

    Default


    First: Thx 4 ur great support, mates!

    Second: For @parkcity, to delete this error, u need to erase or commented the windows internal command to close the windows, then, it will run nice again

    Now, my question I need to print all the grid, but not all the grid print on the current screen, else all data store. Then, how could I return all the storage on a "grid.panel" that is the parameter i need to ?

    thx 4 ur time!

    cya!

    PS: sorry if i didnt explaned very well
    Last edited by mfruizs2; 14 Oct 2011 at 12:25 AM. Reason: scheen = screen :P

  10. #10
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    12
    hschaefer123 will become famous soon enough

      0  

    Default


    A little addon to the htmlMarkup with table headers (THEAD) and table body (TBODY) tags will allow printing table head on each page (if printing large grids that are printed on different pages).

    Concerning question printing large store, the grid prints the binded store. So make sure the store contains all data and you do not use filtering or paging (ex. paging plugin) or paging should be a very large value.

    This solution should not be a genrall solution for printing very large data sets! In such a case you should generate print output on server side and maybe download it as PDF.

    The plugin is thought as a quick and easy solution to print the visible grid part, including custom renderers, etc.

    Currently all columns are printed, but it is also possible to filter hidden column, or prior print to hide some columns that contain html markup not needed to be printed in a later version.

    Code:
                var htmlMarkup = [
                    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
                    '<html>',
                      '<head>',
                        '<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />',
                        '<link href="' + this.stylesheetPath + '" rel="stylesheet" type="text/css" media="screen,print" />',
                        '<title>' + grid.title + '</title>',
                      '</head>',
                      '<body>',
                        '<table>',
                          '<thead>',
                          headings,
                          '</thead>',
                          '<tbody>',
                          '<tpl for=".">',
                            body,
                          '</tpl>',
                          '</tbody>',
                        '</table>',
                      '</body>',
                    '</html>'           
                ];